首页 > 网络编程 > JavaScript > javascript类库 > React > React setState执行机制

详解React中的setState执行机制

2023-12-18 08:48:12 作者：白鲸ld

setState是React组件中用于更新状态的方法,是类组件中的方法,用于更新组件的状态并重新渲染组件,本文给大家详细介绍了React中的setState执行机制,文中通过代码示例介绍的非常详细,需要的朋友可以参考下

一. setState是什么

它是React组件中用于更新状态的方法。它是类组件中的方法，用于更新组件的状态并重新渲染组件。
setState 方法接受一个对象或一个函数作为参数。当传递一个对象时，它会将该对象合并到当前的状态对象中，并触发组件的重新渲染。当传递一个函数时，该函数会接收先前的状态作为参数，并返回一个新的状态对象，然后 setState 方法会将返回的状态对象合并到当前的状态中。

简单例子

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  incrementCount() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.incrementCount()}>Increment</button>
      </div>
    );
  }
}

这里有个count属性。当用户点击按钮时，调用incrementCount方法，该方法使用setState更新count属性的值，触发组件的重新渲染，并在页面上显示更新后的计数值。

二、更新类型

在使用setState更新数据的时候，setState的更新类型分成:

异步更新
同步更新

异步更新

当调用setState方法时，React会将更新请求放入队列中，并在合适的时候进行批处理，然后批量更新组件的状态。这意味着在调用setState后，不会立即改变组件的状态值，而是在稍后的时间点进行更新。

异步更新的好处是可以提高性能，避免不必要的重复渲染。当多次调用setState时，React会将这些更新合并为一个更新，只触发一次重新渲染。

changeAge() {
  this.setState({
    age: 22
  })
  console.log(this.state.age); // 不会是22，是之前的一个值
}

这并不能看到最新的state的结果

changeText() {
  this.setState({
    age: 22
  }, () => {
    console.log(this.state.age); // 22
  });
}

同步更新

在某些情况下，需要立即获取最新的状态值，而不是等待异步更新。为了实现同步更新，可以使用回调函数形式的setState。

回调函数形式的setState接收一个函数作为参数，该函数可以接受先前的状态和属性作为参数，并返回一个新的状态对象。React会立即执行该函数，并使用返回的状态对象进行更新。

componentDidMount() {
  const btn = document.getElementById("btn");
  btn.addEventListener('click', () => {
    this.setState({
      mes: "你好啊,白鲸"
    });
    console.log(this.state.mes); // 你好啊,白鲸
  })
}

小结

在组件生命周期或React合成事件中，setState是异步的
在setTimeout或者原生dom事件中，setState是同步的

State的赋值

三种情况

1.通常情况下的赋值

使用的类型有：数字，字符串，布尔值，null，undefined

this.setState({
  count: 1,
  title: 'setState',
  success: true
})

2.数组类型的赋值

增加一个值的方法

// 方法一：将state先赋值给另外的变量，然后使用concat创建新数组
var hobaies= this.state.hobaies; 
this.setState({
  hobaies: hobaies.concat(['篮球']);
})
// 方法二：使用preState、concat创建新数组
this.setState(preState => ({
  hobaies: preState.hobaies.concat(['篮球']);
}))
// 方法三：ES6数组扩展 
this.setState(preState => ({
  hobaies: [...preState.hobaies, '篮球'];
}))

3.对象类型的赋值

// 方法一：使用Object.assign
let ages= this.state.ages;
this.setState({
  owner: Object.assign({}, ages, {age: 22});
})
// 方法二：使用preState、Object.assign创建新对象
this.setState(preState => ({
  owner: Object.assign({}, preState.ages, {age: 22});
}))

今天就学到这，以后有深入理解还会更新的。

以上就是详解React中的setState执行机制的详细内容，更多关于React setState执行机制的资料请关注脚本之家其它相关文章！