useState

• setState参数为字面量对象/值和函数的区别？
  1. 如果传入字面量对象或hooks里的值，会将state合并，使用最后一个state作为本次渲染的值。
  2. 如果传入的是回调函数，回调函数里的参数为上一个state的值。
• special
  • 在异步请求或setTimeout有副作用的回调中，setState为同步代码
• 以上特性同样适用于class组件

import React, {Component} from 'react';
import ReactDOM from 'react-dom';


class Test extends Component {

  state = {
    a: 0
  }
  
  componentDidMount(){
    this.setState({a : 1});
    this.setState({a : 2});
    console.log(this.state.a); // 0  异步代码导致
    this.setState(state => console.log(state.a)); // 2 适用于规则1 2

    setTimeout(() => {
      this.setState({a: 10}); // 同步代码为导致页面立即渲染
      console.log(this.state.a); // 10 
      this.setState({a: this.state.a + 1});  // 同步代码为导致页面立即渲染
      console.log(this.state.a); // 11
    }, 1000);
  }

  render(){
    console.log(999); // 一共会打印四次
    return <>1</>
  }
}

ReactDOM.render(<Test />, document.getElementById('root'));