React Hooks：useState 的实现
今天我要写一篇关于 React Hook 的文章。我不会逐一介绍所有 Hook，而是重点讲解 useState 这个 Hook 的原理和实现。要在现有项目中使用此功能，您需要将 Node 版本更新到 10.8.0。
在深入探讨这个话题之前，我们需要了解两件事：
1. 解构
ES6 最强大的特性之一就是解构赋值。如果你想使用 React 等前端框架进行开发，那么解构赋值至关重要，因为 useState 函数依赖于数组解构。解构赋值是一种从数组中提取多个属性的方法，它通过获取数组结构并利用类似于数组字面量的语法，通过赋值操作来解包元素。以下是一个数组解构赋值的示例。
const [ one, two ] = [ 1, 2 ];
console.log(two); // 1
console.log(one); // 2
2. 什么是 React 状态？
简单来说，React state 是一个对象，用于存储属于组件的属性值，这些值可以改变。
3. 什么是 useState？
这个钩子函数将拥有类中 `this.state` 提供的所有功能。不同之处在于，与类不同，`useState` 中的状态不一定是对象，我们可以保存字符串或数字。
现在让我们集中讨论主要话题：
钩子！
Hooks 是允许你使用 React 特性的函数，而 useState 就是一个允许你将 React 状态添加到函数组件中的 Hook。在此更新之前，管理组件局部状态的方法是创建一个类。我们称 Hooks 为函数组件，是因为它们能够使用 React 状态。
为什么要使用像 useState 这样的 Hooks？
我们应该使用 Hooks，因为它允许组件间功能复用，这使得我们在编辑组件和更新组件状态时更具优势。React 并没有完全摒弃类，但我们终于可以使用普通的函数式组件来管理状态了。人们已经习惯编写函数式组件，现在他们无需再为了实现所有功能而将其转换为类。
以前，如果你想给函数组件添加状态，你需要把它转换成类，但现在我们可以使用 Hook，这非常简单。接下来我将帮助你实现它。
我们有一个带有状态的类组件，这是传统的方式！
然后我们将分几个步骤使用 useState 将其转换为函数式组件：
import React, {Component} from 'react';
// 1. create a class component
class ClassNumber extends Component {
constructor(props){
super(props)
// 2. create a state variable set to 0
this.state = {
number : 0
}
}
/* 3. method capable of setting a new state value
calling setState to set the new value */
randomNumber = () => {
this.setState({
//random number to 10
number: (Math.floor(Math.random() * 10))
})
}
render (){
return (
<div>
<button onClick={this.randomNumber}>
Number? {this.state.number}</button>
/* the output is a button which number is set to 0 and if clicked will give you a random number */
</div>
)
}
};
export default ClassNumber;
实现 useState
首先，我们从 React 导入 useState，然后将 Number 组件设为函数组件。
import React, {useState} from 'react';
function FuncNumber() {
}
export default FuncNumber
由于我们使用的是函数式组件，所以不能像以前那样使用状态。我们需要一种不同的方法，即实现 useState Hook。useState 是一个特殊的函数，允许你向函数式组件添加状态。
它的工作原理是 useState 本身就是一个函数，因此我们需要调用它。useEffect 函数接受一个参数，即状态属性的初始值。useState 返回一对值：当前状态和一个用于更新状态的函数。
我们将使用解构赋值来设置这个函数的值。
import React, {useState} from 'react'
//create a function component
function FuncNumber() {
/* Use hook which accepts an argument of initial value,
returns the current value and method that updates the current value */
const [number, setNumber] = useState(0)
}
export default FuncNumber
变量 number 和 setNumber 是您设置的变量名，但最佳实践是使用变量名和 setVariable 属性。它们分别表示当前值和更新后的值。
现在我们添加按钮，点击时会使用 `setNumber` 函数，该函数会将新数字设置为一个随机数。由于这是一个函数调用，所以它会变成一个箭头函数。
import React, {useState} from 'react';
function FuncNumber() {
const [number, setNumber] = useState(0)
return (
<div>
<button
/* setNumber will update the current value to a random number */
onClick={() => setNumber(Math.floor(Math.random() * 10))}>
Number: {number}</button>
</div>
);
/* the output is a button which number is set to 0 and if clicked will give you a random number */
}
export default FuncNumber;
结论
Hooks 允许您使用函数，从而在提取、测试和重用代码方面提供更大的灵活性。得益于 Hooks，状态管理的复杂性得以降低。这种实现方式减少了代码量，并且代码清晰易读，易于理解。
文章来源：https://dev.to/josesrodriguez610/react-hooks-implementation-of-usestate-1hl1