背景
在 Hook 出现之前，为实现一个计数器的功能，我们最常用的做法是在react class 的构造函数中声明一个 count的状态变量，然后通过在点击事件中调用 this.setState 方法 对 count 进行递增操作。
案例代码如下：
1class Example extends React.Component { 2 constructor(props) { 3 super(props); 4 this.state = { 5 count: 0 6 }; 7 } 8 9 render() {10 return (11 <div>12 <p>You clicked {this.state.count} times</p>13 <button onClick={() => this.setState({ count: this.state.count + 1 })}>14 Click me15 </button>16 </div>17 );18 }19}以上代码有两个核心点
-
constructor 初始化 state 的count值为 0
-
通过 this.setState 改变 count 值。
效果如下图所示：
图 1
接下来我们再看下 通过 state hook 如何来实现以上效果。
1import { useState } from 'react'; 2 3function Example() { 4 // 声明 count，并初始化为 0 5 const [count, setCount] = useState(0); 6 7 return ( 8 <div> 9 <p>You clicked {count} times</p>10 <button onClick={() => setCount(count + 1)}>11 Click me12 </button>13 </div>14 );15}在这里，我们使用了 React中的函数组件（在以前我们也称之为“无状态组件”）：
1function Example(props) {2 return <div/>;3}Hooks 无法在 class 中应用，只能通过 组件函数来替代。
那什么是Hooks呢
Hook 是一种特殊的能力，可以让您“间接使用”React的功能。useState就是一个 Hook，它允许您将 React状态添加到功能组件。
如果要编写一个函数组件并需要为它添加一些状态，那么之前的做法是必须将它转化为一个 类， 现在您可以在现有的组件中使用Hook。(关于哪里可以使用Hook，我们在后面的文章中进行介绍)
状态变量声明
在函数组件中，因为没有 this，所以无法使用this.state 。只能通过 useState 直接在组件内部调用 Hook：
1import { useState } from 'react';23function Example() {4 const [count, setCount] = useState(0);5}-
从 React 导入 useState Hook， 它允许我们将本地状态保存在功能组件中。
-
useState: 主要目的是声明“状态变量”，变量可以是任意值。功能类同 this.state，通常当函数退出时，变量消失，但状态变量由react保留。
-
useState() Hook 的唯一参数是初始状态。与 类不同，状态不必是对象。可以是 一个数字或一个字符串。
-
useState 返回一对值：当前状态和更新它的函数。const [count, setCount] = useState() 类似于类中的 this.state.count 和 this.setState。
状态变量调用
在类中使用当前的计数时，直接通过 this.state.count
1<p> You clicked { this.state.count } times. </p>2在函数中，我们可以直接使用 count:
1<p> You clicked {count} times. </p>2状态变量更新
在类中，我们需要调用 this.setState() 来更新 count 状态:
1<button onClick={() => this.setState({ count: this.state.count + 1 })}>2 Click me3 </button>4在函数中，我们已经拥有了 setCount 与 count 作为变量，所以我们不需要使用 this：
1<button onClick={() => setCount(count + 1)}>2 Click me3 </button>4提示信息
`[]`的使用
1 const [count, setCount] = useState(0);左侧的名称不是React API的一部分，您可以命名自己的状态变量。这种语法在JavaScript 中称之为 “数组结构”，与一下方式等同
1var countStateVariable = useState(0);2var count = countStateVariable[0];3var setCount = countStateVariable[1];使用多个状态变量
1function Example() {2 const [name, setName] = useState('tom');3 const [count, setCount] = useState(0);4 const [todos, setTodos] = useState([{5 text: 'abc'6 }])7}这里我们声明了 name, count, todos作为局部变量，我们可以单独更新他们的值：
1function changeName() {2 setName('zhangsan');3}您不必使用许多状态变量。状态变量可以很好地保存对象和数组，所以您仍然可以将相关数据分组在一起。但是，与类中的this.setstate不同，更新状态变量总是替换它，而不是合并它。
参考：https://reactjs.org/docs/hooks-overview.html
---------- END ----------
长按关注我们
