react的一些原理

一、setState

1、setState是异步更新state内容的

如果想要连续更新两次state需要使用回调的形式:

this.setState({
    num:this.state.num+1
})
console.log(state.num) //1
this.setState({
    num:this.state.num+1
}) //两次调用setState因为异步的关系拿到的都是原本的num值:1,所以两次更新都是把num赋值为1+1
console.log(state.num) //1

//推荐----------------------------------------
this.setState((state,props)=>{
    console.log(state.num) //1,原本未更新前是1
    return {
        num:state.num+1
    }
})
this.setState((state,props)=>{
    console.log(state.num) //2,取到的是上次调用setState后的 state值
    return {
        num:state.num+1
    }
})
console.log(state.num) //1,因为这种形式也是异步,所以同步代码打印的内容还是1

2、setState的第二个参数,页面更新完后的回调函数

react的一些原理_第1张图片

 3、组件更新会引起哪些相关组件更新?--以此组件为跟节点的子树的更新

react的一些原理_第2张图片

 

你可能感兴趣的:(react.js,javascript,前端)