React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React State Hook

React Hook之使用State Hook的方法

作者：zju_cbw

这篇文章主要为大家详细介绍了React使用State Hook的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

Hook 简介章节中使用下面的例子介绍了 Hook:

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);
  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

我们将通过将这段代码与一个等价的 class 示例进行比较来开始学习 Hook。

等价的 class 示例

如果你之前在 React 中使用过 class，这段代码看起来应该很熟悉：

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

state 初始值为 { count: 0 } ，当用户点击按钮后，我们通过调用 this.setState() 来增加 state.count。整个章节中都将使用该 class 的代码片段做示例。

Hook 和函数组件

复习一下， React 的函数组件是这样的：

const Example = (props) => {
  // 你可以在这使用 Hook
  return <div />;
}

或是这样：

function Example(props) {
  // 你可以在这使用 Hook
  return <div />;
}

你之前可能把它们叫做“无状态组件”。但现在我们为它们引入了使用 React state 的能力，所以我们更喜欢叫它”函数组件”。

Hook 在 class 内部是不起作用的。但你可以使用它们来取代 class 。

Hook 是什么？

在新示例中，首先引入 React 中 useState 的 Hook

import React, { useState } from 'react';
function Example() {
  // ...
}

声明 State 变量

在 class 中，我们通过在构造函数中设置 this.state 为 { count: 0 } 来初始化 count state 为 0：

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

在函数组件中，我们没有 this，所以我们不能分配或读取 this.state。我们直接在组件中调用 useState Hook：

import React, { useState } from 'react';
function Example() {
  // 声明一个叫 “count” 的 state 变量
  const [count, setCount] = useState(0);

既然我们知道了 useState 的作用，我们的示例应该更容易理解了：

import React, { useState } from 'react';
function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);

我们声明了一个叫 count 的 state 变量，然后把它设为 0。React 会在重复渲染时记住它当前的值，并且提供最新的值给我们的函数。我们可以通过调用 setCount 来更新当前的 count。

注意

你可能想知道：为什么叫 useState 而不叫 createState?

“Create” 可能不是很准确，因为 state 只在组件首次渲染的时候被创建。在下一次重新渲染时，useState 返回给我们当前的 state。否则它就不是 state 了！这也是 Hook 的名字总是以 use 开头的一个原因。我们将在后面的 Hook 规则中了解原因。

读取 State

当我们想在 class 中显示当前的 count，我们读取 this.state.count：

  <p>You clicked {this.state.count} times</p>

在函数中，我们可以直接用 count:

  <p>You clicked {count} times</p>

更新 State

在 class 中，我们需要调用 this.setState() 来更新 count 值：

 <button onClick={() => this.setState({ count: this.state.count + 1 })}>
    Click me
  </button>

在函数中，我们已经有了 setCount 和 count 变量，所以我们不需要 this:

  <button onClick={() => setCount(count + 1)}>
    Click me
  </button>

小结

现在让我们来仔细回顾一下学到的知识，看下我们是否真正理解了。

import React, { useState } from 'react';
function Example() {
	const [count, setCount] = useState(0);
	return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
         Click me
        </button>
      </div>
   );
}

提示：方括号有什么用？

你可能注意到我们用方括号定义了一个 state 变量

const [count, setCount] = useState(0);

等号左边名字并不是 React API 的部分，你可以自己取名字：

const [fruit, setFruit] = useState('banana');

这种 JavaScript 语法叫数组解构。它意味着我们同时创建了 fruit 和 setFruit 两个变量，fruit 的值为 useState 返回的第一个值，setFruit 是返回的第二个值。它等价于下面的代码：

  var fruitStateVariable = useState('banana'); // 返回一个有两个元素的数组
  var fruit = fruitStateVariable[0]; // 数组里的第一个值
  var setFruit = fruitStateVariable[1]; // 数组里的第二个值

当我们使用 useState 定义 state 变量时候，它返回一个有两个值的数组。第一个值是当前的 state，第二个值是更新 state 的函数。使用 [0] 和 [1] 来访问有点令人困惑，因为它们有特定的含义。这就是我们使用数组解构的原因。

提示：使用多个 state 变量

将 state 变量声明为一对 [something, setSomething] 也很方便，因为如果我们想使用多个 state 变量，它允许我们给不同的 state 变量取不同的名称：

function ExampleWithManyStates() {
  // 声明多个 state 变量
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: '学习 Hook' }]);

在以上组件中，我们有局部变量 age，fruit 和 todos，并且我们可以单独更新它们：

  function handleOrangeClick() {
    // 和 this.setState({ fruit: 'orange' }) 类似
    setFruit('orange');
  }

你不必使用多个 state 变量。State 变量可以很好地存储对象和数组，因此，你仍然可以将相关数据分为一组。然而，不像 class 中的 this.setState，更新 state 变量总是替换它而不是合并它。

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容! 

您可能感兴趣的文章:
阅读全文