react数据异步更新

1. react数据异步更新

定义一个类组件模板：

class MyCom extends React.Component{}

设置state状态数据：

state = {
    name: "张三"
  }

render()渲染函数：

render(){
    return {this.state.name}
  }

过程：this打点调用自定义函数change绑定click事件，返回一个button按钮，通过this.state打点调用自定义属性name。

在ReactDOM.render()中调用类组件模板：

ReactDOM.render(
  ,
  document.getElementById('example')
)

现要修改button按钮的内容，点击按钮数据会更新，张三变成李四。通过箭头函数定义自定义函数change:

change = ()=>{
    this.setState({
      name: "李四"
    })
    // 注意：this.setState数据更新属于异步更新，此处打印是更新前的值
    console.log(1, this.state.name);  // 张三
}

• 注意：this.setState数据更新 属于 异步更新，此处打印是更新前的值

2.1 在生命周期钩子中更新数据

• 生命周期钩子更新后调用数据，就会得到更新后的数据，即异步更新数据

componentDidUpdate = (prevProps, prevState) => {
    console.log(2, prevState.name, this.state.name); // 张三 李四
}

2.2 使用this.setState的异步回调更新数据

• this.setState() 的第二个参数是可选的 回调，是异步更新完成时的回调(与 小程序的this.setData() 相同，也是异步更新回调)

this.setState({
  name: "李四"
}, ()=>{
  console.log(3, this.state.name);  // 李四
})

补充：vue的异步更新回调

• 在vue异步更新中 this.name=“李四”; this.$nextTick(()=>{})是vue中的异步更新回调
• this. n e x t T i c k ( ( ) = > ) 将 回 调 函 数 中 的 操 作 放 到 下 一 次 D O