|
大家好，我是前端西瓜哥。
React 在 16.8 引入了 Hooks 概念，赋予了函数组件以 “魔法”，也能像类组件一样使用内部状态、上下文等特性。下面我们看看其中 useState 的使用方式。
useState
const [count, setCount] = useState(0);
useState 用于声明函数组件需要用的状态变量，对应类组件的内部状态对象 this. state 的单个属性。
useState 方法会返回：
-
状态值 state； -
可以修改该状态的方法 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 新人。
|