当你调用 setState 的时候,发生了什么事?
将传递给 setState 的对象合并到组件的当前状态,这将启动一个和解的过程,构建一个新的 react 元素树,与上一个元素树进行对比( diff ),从而进行最小化的重渲染。
constructor(props){
super(props);
this.state = {
age:1
}
}
this.setState((prevState)=>({
age:++prevState.age
}));
console.log(this.state.age)
通过调用this.setState去更新this.state,不能直接操作this.state,请把它当成不可变的。
调用setState更新this.state,他不是马上就会生效的,他是异步的。
所以不要认为调用完setState后可以立马获取到最新的值。
多个顺序执行的setState不是同步的一个接着一个的执行,会加入一个异步队列,
然后最后一起执行,即批处理。
setState是异步的,导致获取dom可能拿的还是之前的内容,
所以我们需要在setState第二个参数(回调函数)中获取更新后的新的内容。
this.setState((prevState)=>({
age:++prevState.age
}),()=>{
console.log(this.state.age) //获取更新后的最新的值
});
为什么setState 的参数是一个 callback 而不是一个对象
因为 this.props 和 this.state 的更新可能是异步的,不能依赖它们的值去计算下一个 state
setState 和 replaceState 的区别
setState 是修改其中的部分状态,相当于 Object.assign,只是覆盖,
不会减少原来的状态 replaceState 是完全替换原来的状态,相当于赋值,将原来的 state 替换为另一个对象,如果新状态属性减少,那么 state 中就没有这个状态了
react中如何对state中的数据进行修改?setState为什么是一个异步的
修改数据通过this.setState(参数1,参数2)
this.setState是一个异步函数
参数1 : 是需要修改的数据是一个对象
参数2 : 是一个回调函数,可以用来验证数据是否修改成功,同时可以获取到数据更新后的DOM结构 等
同于componentDidMount
this.setState中的第一个参数除了可以写成一个对象以外,还可以写成一个函数,
函数中第一个值为prevState 第二个值为prePprops this.setState((prevState,prop)=>({}))
为什么setState是一个异步的?
当批量执行state的时候可以让DOM渲染的更快,也就是说多个setstate在执行的过程中还需要被合并
this.setState之后react做了哪些操作
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate