React 关于 setState

关于setState 同步更新还是异步更新

• 在React相关的回调函数中setState() 是异步更新

  • React 相关的回调包括：组件的生命周期钩子，React 组件事件监听回调。

• 不在React 相关的回调中setState() 是同步更新

  • React不相关的回调包括常见的：setTimeout(), Promise()等。

• setState()传参的第二个callback() 参数。setState() 的第二个回调会在更新状态之后，组件重新render() 之后调用，这里面我们可以获取到最新的状态值。

  • setState((prevState, props)=>({
        
    }),()=>{
        
    })

遇到重复多次调用setState()，React如何处理？

• setState() 异步更新状态时候，因为同步更新，我们调用几次 setState()，就会触发几次 render钩子

• 当setState() 传对象类型参数，React会合并重复多次的调用setState()，触发一次render。

• 当setState() 传函数类型参数，React会依次多次的调用setState()，触发一次render。

  无论以哪种方式传参重复调用 setState() ，React 都只会进行一次render 调用，这也是性能优化的一部分，防止多次重复渲染带来的性能问题。

  官网推荐我们使用setState()时候，第一个参数传函数类型参数，因为函数参数中接收的 state 和 props 都保证为最新。

 

React提供另一种调用setState函数的方式传入一个函数，而不是对象

// 错误的用法 
this.setState({ counter: this.state.counter + this.props.increment }) 
// 正确的用法 
this.setState((prevState, props) => ({ 
    // 接受一个表示前次state的参数和一个当前props的参数 
    counter: prevState.counter + props.increment 
    // 这里实际上是返回了一个对象，是ES6箭头函数的简写 
}),()=>{
    //更新后的state
    console.log(this.state)
}) 

setState是对象的合并而不是替换

setState方法是将传入的参数对象或函数返回的对象与现有的state对象进行合并，非常类似于使用Object.assign(prevState, newState)的效果