【React Hooks 系列】useState

大家好，我是前端西瓜哥。

React 在 16.8 引入了 Hooks 概念，赋予了函数组件以 “魔法”，也能像类组件一样使用内部状态、上下文等特性。下面我们看看其中 useState 的使用方式。

useState

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

useState 用于声明函数组件需要用的状态变量，对应类组件的内部状态对象 this. state 的单个属性。

useState 方法会返回：

1. 状态值 state；

2. 可以修改该状态的方法 setState。

useState() 方法的第一个参数如果不是函数，会被直接作为 state 的初始值。

但如果这个参数是函数，会有点不一样。useState 会执行这个函数，取它的返回值作为初始值。

不过如果你就是想用一个函数作为初始值，还是要通过让函数返回函数的方式来拿到它：

const fn = () => { /* 内容 */ };
const [handler, setHandler] = useState(() => fn);

函数可以用来做懒加载。也适合于需要用到复杂计算的情况，传入的函数只会在第一次渲染时才执行，之后的渲染都不会执行。

如果你把计算放到外面，每次渲染其实都是在做无用功，因为最后的计算结果并不会被使用。

setState

我们通过 setState 给 state 更新新值，常用方式是直接传一个值。

或者传入一个函数，它能够拿到上一个状态的 state，然后基于它实现逻辑，函数的返回值就会作为 state 的新状态。

函数写法在一段逻辑中需要多次累加计数器的场景下，还是相当有用的。

setCount(newCount);
setCount(preCount => preCount + 1);

和前面设置 state 初始值一样，你如果要给 state 赋予一个新函数，你也需要通过让函数返回函数的方式实现。

如果新值和原来的值相同，将不会触发重新渲染。

这里的对比使用的是 Object.is() 方法。

这里有一个初学者容易踩的坑：如果你修改原对象的属性，然后将原对象直接传给 setState 执行，其实并不会触发组件的重新渲染，因为新旧引用其实都指向相同的对象。

所以对于引用类型，比如对象、数组、Map、Set 等，你都要浅拷贝后再给 setState 执行，这样才能保证组件能被重新渲染。

const [info, setInfo] = useState({ name: 'fe_watermelon', age: 99 });

info.age = 199;
setInfo(info); // 不会触发重新渲染，还是原来的对象
setInfo({...info}); // 这样才会重新渲染，因为是拷贝出来的新对象

结尾

总结一下，useState 会返回一个状态 state 和一个更新状态的函数 setState。

useState 的初始化只会执行一次，以后再调用函数组件时，会用 state 最后被设置的状态。

通过 setState 更新状态时，要注意新旧值不能相等，否则组件不会重新渲染，所以你要特别注意对象、数组这些引用类型，需要将其拷贝为新对象才能触发更新。

我是前端西瓜哥，一个在努力学习 React 的 React 新人。