state声明式

  • state声明式已关闭评论
  • 30 次浏览
  • A+
所属分类:Web前端
摘要

 在类组件 中,在constructor()中使用this.state={}来定义 在函数组件中,自React(16.8)版本以后,使用useState()来定义。

 

如何定义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运算(协调运算);自动合并的规则是一种浅合并。