标签:生命周期 DOM react state 当前 props 数据
constructor:(1次) 当前生命周期用来做组件的初始化,当输写当前生命周期时必须要写super函数,否则this的指向会发生错误。 当前生命周期可以用this.state来定义当前组件所需要的一些状态 当前生命周期特殊情况下是接收不到props的数据,如果想要接收到props的数据的话,需要在super和constructor中传递props这个参数 componentWillMount:挂载前 (1次) (17.0废除掉了) 当前生命周期可以接收到props传递过来的数据,可以将外部数据转换为内部数据. 在当前生命周期中尽量不要使用this.setState。因为当前生命周期执行完毕以后,下一个生命周期就是render函数 在当前生命周期中我们可以对this.state中的数据做初始化的最后一次修改 render: 渲染 (多次) 当前生命周期的作用是将数据与虚拟DOM进行相结合,进行数据的渲染。render在第一次执行完毕以后会将渲染的结果在内存中保留一份 当render函数第二次执行的时候,会与内存中的虚拟DOM进行对比,这种对比方式叫做diff算法(diff算法:新旧两个虚拟DOM的对比就是diff算法) componentDidMount:挂载后(1次) 当前生命周期可以获取到真实的DOM结构,一般情况下我们可以在当前生命周期中进行ajax的数据请求 || 进行方法的实例化 如何获取到真实的DOM结构? 1、this.refs.属性 2、 <元素 ref={(形参)=>this.属性 = 形参}></元素> 这里面的形参代表的是当前的DOM元素 使用: this.属性 componentWillUnmount:卸载 (1次) 当前生命周期的作用用来做事件的解绑 / 事件的移除 等操作 componentWillReceiveProps:(多次) (17.0废除掉了) 当props的数据发生改变的时候当前生命周期就会执行,当前生命周期中有一个参数就是新的props,在当前生命周期中可以用来检测外部数据的更新 shouldComponentUpdate:(多次) 1、当state||props中的数据发生改变的时候会执行当前生命周期,当前生命周期必须要返回一个布尔值,当返回true的时候会执行下面的生命周期,如果返回false则下面的生命周期不会执行(render函数不会执行), 2、当前生命周期中会有2(3)个参数 一个是新的props 一个是新的state。我们可以通过新的props || state 与 旧的props和state进行对比,来进行性能优化 3、当前生命周期决定的是render函数是否渲染,而不是数据是否更新,哪怕返回值是false 数据其实也会进行更新的 4、千万不要在这里面执行this.setState否则会造成死循环 componentWillUpdate:(多次) (17.0废除掉了) 当前生命周期可以用来做更新数据的最后一次修改 当前生命周期中有2个参数一个是新的props 一个是新的state 我们可以通过新的props || 新的state来做数据最后的一次更改 componentDidUpdate:(多次) 当期生命周期可以获取到数据更新后最新的DOM结构 当前生命周期数据与模板已经进行相结合,生成最新的DOM结构了 注意:如果我们在当前生命周期中做一些实例化的时候 一定要加判断 当前生命周期也有2个参数 一个是旧的props 一个是旧的state标签:生命周期,DOM,react,state,当前,props,数据 来源: https://www.cnblogs.com/BySee1423/p/13150692.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。