如何定义state

在类组件 中，在constructor()中使用this.state={}来定义

class A extends Component {
  constructor (props) {
    super(props)  // 调用Component的构造函数
    // 定义state
    this.state = {
      num: 1
    }
  }
}

在函数组件中，自React(16.8)版本以后，使用useState()来定义。

function B (props) {
  // 定义state声明式变量
  let [num, setNum] = useState(1)
}

如何使用state

  • 在类组件中，使用this.state访问声明式变量。
  • 在函数组件中，直接访问useState的结果。

如何修改state声明式变量

在类组件中，使用this.setState()方法来修改。

class A extends Component {
  constructor (props) {
    super(props)  // 调用Component的构造函数
    // 定义state
    this.state = {
      num: 1
    }
  }
     this.setState(state=>({num: state.num + 1}), ()=>            
    {console.log( this.state.num)})
  }
}

在函数组件中，使用useState()返回值的第二个参数（set*）方法来修改。

function B (props) {
  // 定义state声明式变量
  let [num, setNum] = useState(1)
   const add = () => {
    console.log('1--- num', num)
    // 如果这里是React(V17)中，在合成事件中是异步的，如果在宏任务或    
   Promise.then()是同步的。
    // 如果这里是React(18)，无论在哪里都是异步的。
    // useState()给的这种set*方法，是没有callback的。
    // setNum(num + 1)
    setNum(num => num + 10)
    console.log('2--- num', num)
  }  
}

this.setStaate()的两种写法

  • this.setState({},callback)当我们修改state时，如果旧值与新值无关，建议使用这种写法。
  • this.setState((state)=>{},callback)当我们修改state时，如果旧值与新值有关，建议使用这种写法。

this.setState()的异步性

  • 在React(v17/v16)中，this.setState()在合成事件（事件，生命周期中）是异步的；在宏任务、promise.then()中是同步的。

  • 在React(v18)中，无论this.setState()在哪里都是异步的，这种特性，被称之为“并发模式”。

  • this.setState()定为异步是为了性能优化。

this.setState()自动合并

在同一个函数域中，多个this.setState()会自动合并，以减少没必要的diff运算(协调运算)；自动合并的规则是一种浅合并。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。