持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活动详情

前言

在使用Hooks的useState时，肯定会很好奇useState到底做了什么，到底怎么实现的，可以代替之前繁琐的写法，能够用简单的语法来实现改变变量。下面我将分享一下useState的原理，希望对大家有帮助，欢迎讨论指出问题！

1.useState基本用法

useState是允许你在 React 函数组件中添加 state状态，

 let [num, setNum] = useState(0)

等价于class的写法

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

  render() {
    return (
      <div>
        <p>You clicked {this.state.num} times</p>
        <button onClick={() => this.setState({ count: this.state.num + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

state状态:React把组件看成是一个状态机，通过状态去操作状态机，在react中只需要更新组件的state，然后根据新的state重新渲染用户界面。

那么可以知道 useState做了什么：

1.定义了一个‘state变量’，与this.state提供的功能相同

2.当点击按钮时改变变量，setState函数与this.setState功能类似：改变数据，然后重新渲染render

2.自己手写实现一个useState

import render from '../../../utils/index'
 
let useStateC = function (num: any) {
 let _state = num //这样每次执行 useState都会将state初始化
  function setState(newState: any) {
    _state = newState 
    render() //重新渲染会调用 App()，执行 useState(0) 又将n+1置为0了
  }
  return [_state, setState]
}
export default useStateC

运行结果你会发现问题：数据没有变化，是因为没有存储state，每次重新渲染组件时，state都重置了，因此应该把state提取出来，存在外面

import render from '../../../utils/index'


let _state: any
let useStateC = function (num: any) {
  _state = _state || num

  function setState(newState: any) {
    _state = newState
    render()
  }
  return [_state, setState]
}
export default useStateC

现在运行结果可以看出，简单的功能是可以实现的了，点击按钮+1修改，变量可以进行改变。

后期可以再次优化适用于更加复杂的功能，比如：一个组件多次使用该如何兼容，所有的数据都放在state里面该如何做处理前面的数据才不会被覆盖。

结束语

希望大家能够喜欢我的文章，我真的很用心在写，也希望通过文章认识更多志同道合的朋友。

最后伙伴们，如果喜欢我的可以给点一个小小的赞👍或者关注➕都是对我最大的支持。

浅浅分析useState原理

前言

1.useState基本用法

2.自己手写实现一个useState

结束语