前端基础之《React（11）—state声明式》

一、如何定义state1、在类组件中在constructor()构造函数中使用this.state{}来定义2、在函数式组件中自React16.8以后可以使用useState()来定义二、如何使用state1、在类组件中通过this.state来访问声明式变量import { Component } from react; class A extends Component { constructor(props) { super(props); // 调用父类的构造函数 // 定义state this.state { num: 1, }; } // 类组件一定要有render方法因为render返回值就是组件的DOM结构 render() { // 建议在类组件中解构state const { num } this.state; return ( div h1类组件/h1 h1{ num }/h1 /div ); } } export default A;2、在函数式组件中直接访问useState的结果三、如何正确地修改state声明式变量1、在类组件中使用专属方法this.setState()来修改2、在函数式组件中使用useState()返回值的第二个参数来修改3、this.setState两种写法1this.setState({})对象语法2this.setState((state,props){}) 回调函数语法3例子// 自定义方法 add () { // 这种写法是没问题的但不够优雅。因为你要修改的state新值是由旧值计算而来的 // 所以建议使用函数式写法this.setState((state,props){}) // 用旧值state参与运算得到新值 this.setState({ num: this.state.num 1, }); }4、this.setState是异步的所以有第二个参数callback表示声明式变量修改已完成this.setState({}, callback)this.setState((state,props)({}, callback))四、关于this.setState()的异步性1、在ReactV17/V16中this.setState()在合成事件on*系列事件、生命周期中是异步的。在宏任务、Promise.then()中是同步的2、在ReactV18以后无论this.setState()在哪里都是异步的。这种特性被称之为“并发模式”3、为什么要把this.setState()这个语句定义成异步的呢为了性能优化4、详解this.setState()的自动合并什么是this.setState()的自动合并在同一个函数域中多个this.setState()会自动合并以减少没有必要的Diff运算协调运算5、例子sub () { console.log(1---foo, this.state.foo); this.setState(state({foo: state.foo - 2}), ()console.log(3---foo, this.state.foo)); console.log(2---foo, this.state.foo); }效果