美文网首页
React生命周期

React生命周期

作者: 未路过 | 来源:发表于2022-11-11 09:20 被阅读0次
    image.png image.png image.png 在render函数里面,每使用一次 image.png

    先经过babel,进行React.createElment的包裹,然后被react和react-dom执行。
    createElement函数就会根据类创建一个实例。(App是一个类,)
    React.createElement(App, null)
    而且每次创建实例的时候,就会先执行类的constructor方法。然后执行实例render方法。返回一个react element的一个元素。然后转换成真实dom,挂载到元素上。渲染到界面上。
    然后执行componentDidMount实例方法。
    我们通过setState修改数据的时候,会根据新的state数据
    会重新执行实例方法的render函数,渲染出来最新的数据。
    (注意:setState方法就算里面的state没有发生变化,也会重新渲染界面。)


    image.png
    image.png
    image.png

    https://zh-hans.reactjs.org/docs/react-component.html

    image.png

    在componentDidUpdate之前会先执行getSnapshotBeforeUpdate,在React更新DOM之前回调的一个函数,这个是在更新dom之前执行的,所以获取dom更新之前的一些数据,在这里做一个保存。
    ;然后更新dom,dom更新完以后,调用componentDidUpdate。

    在getSnapshotBeforeUpdate里面可以保存一些旧的数据。

      getSnapshotBeforeUpdate() {
        return {
          useScroll: 1000,
        };
        //这里返回的东西在componentDidUpdate是可以拿到的
      }
      componentDidUpdate(prevPros, prevState, snapsshot) {
        console.log(prevPros, prevState);
    //{} {message: 'hello world', isShowMessage: true}
        console.log(snapsshot); //{useScroll: 1000}
        console.log("app did update");
      }
    

    相关文章

      网友评论

          本文标题:React生命周期

          本文链接:https://www.haomeiwen.com/subject/gujbtdtx.html