1 setsate
setState( updater [,callback] )
updater:object/function - 用于更新数据
callback:function - 用于获取更新后最新的 state 值
a 构造函数是唯一建议给 this.state 赋值的地方
b 不建议直接修改 state 的值,因为这样不会重新渲染组件
c 自动进行浅合并(只会合并第1层)
d 由于 setState() 异步更新的缘故,依赖 state 旧值更新 state 的时候建议采用传入函数的方式
setState() 异步更新(最好的方法是获取到多个更新, 之后进行批量更新,提高性能)
2 setState一定是异步的吗?
答: 其实可以分成两种情况
在组件生命周期或React合成事件中, setState是异步的
在setTimeou或原生DOM事件中, setState是同步的
3 usestate
const [ state , setState ] = useState( initVal )
调用 setState() 后组件不会立刻更新,无法立刻获取到最新的 state 值
const [count, setCount] = useState(1);
setCount(count + 1);
console.log(count) //setCount()后直接打印出的是旧数据
解决办法:由于useState()获取的setState()不支持第2个参数,可以通过useEffect来解决此问题
useEffect(() => {
console.log(count);
}, [count]);
4 setState和repalceState的区别
setState 是修改其中的部分状态,相当于 Object. assign,只是覆盖,不会减少原来的状态;
replaceState 是完全替换原来的状态,相当于赋值,将原来的 state 替换为另一个对象,如果新状态属性减少,那么 state 中就没有这个状态了