state的注意点

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 1
    }
  }
  render() {
    return (
      <div>
        {this.state.count}
        <button onClick={() => this.myFn()}>btn</button>
      </div>
    )
  }
  myFn = () => {
    this.setState({
      count: this.state.count + 1
    })
  }
}

export default App;

• 修改  this.state 中的值必须通过  this.setState 函数来修改
• 默认情况下  this.setState({count: this.state.count + 1}) 是异步的， React 会收集一段时间的依赖然后一次性更新，目的是优化性能
• 如果需要拿到更新后的值，可以在 this.setState 第二个参数中获取  this.setState({ count: this.state.count + 1 }, () => { console.log(this.state.count); }); 
• 如果  this.setState 在定时器或原生事件中则是同步执行的

this.setState 用法

this.setState({
      count: this.state.count + 1
    }, () => {
      console.log('数据更新完毕了 可以在这里拿到更新后的值');
      console.log(this.state.count);
    })

• 需要在  this.setState 的第二参数中在能拿到更新后的值，十分不方便

this.setState((prevState, props) => {
  return {count: prevState.count + 1}
});

• 给  this.setState 传递一个函数，该函数的第一个参数就是上一次  this.setState 更新之后的值