浅谈慕课网React入门课程笔记(三)
2017-05-12 21:39
218 查看
本文介绍React Components从创建到消失的生命周期状态和属性在生命周期是如何流转的。
1、React Components在浏览器中存在的生命周期中的三个状态
1) Mounting:一个React Components被rander解析生成对应的DOM节点并被插入浏览器的DOM结构的一个过程。当能在浏览器上看到从无到有的时候,mounting已经结束了。mounting结束,就说React Components被mounted了。
2) Updating:一个mounted的React Components被重新render的过程。重新渲染的过程并不是说相应的DOM结构就一定会发生改变,React会React Components的当前state和最近一次的state进行对比,只有当state确实发生了改变,并且影响到DOM结构时,React才会去改变对应的DOM结构。
3) Unmounting:一个mounted的React Components对应的DOM节点被从DOM结构中移除的过程。
2、每一个状态React都封装了对应的多个库函数:will表示将要怎么怎么样,did表示已经怎么怎么样。
1) Mounting:在Mounting状态封装了四个库函数——componentWillMount()和componentDidMount()、getInitialState()、getDefaultProps()。
① componentWillMount():在mounting前被调用;
② componentDidMount():在mounting后被调用;
③ getInitialState():初始化Components state;
④ getDefaultProps():设置默认的props。
2) Updating:在Updating状态封装了四个库函数——componentWillUpdate()和componentDidUpdate()、componentWillReceiveProps()、shouldComponentUpdate()。
① componentWillUpdate():在updating前被调用;
② componentDidUpdate():在updating后被调用;
③ componentWillReceiveProps():当一个mounted的React Components将要接收新的props时调用,其函数参数就是新的props对象,可以在函数体内比较该函数参数和this.props,从而进行例如修改state的操作;
④ shouldComponentUpdate():在一个mounted的React Components已经接收到新的props和state之后判断是否有必要去更新DOM结构,其函数参数有两个,第一个参数是新的props对象,第二个参数是新的state对象,可以分别对比其跟this.props和this.state来决定是否有必要去更新DOM结构,该函数返回true表示更新,返回false表示跳过这次更新,不更新DOM结构。
一般很少重写上面四个函数。
3) Unmounting:在Unmounting状态只封装了一个库函数——componentWillUnmount()。
componentWillUnmount():当要把一个React Components销毁掉时,一般在这个函数中执行cleanup的操作,如释放内存资源、图片资源等,但一般用的非常少,这得益于浏览器内存的垃圾回收机制。
3、props和state的对比
Props往往是通过组件调用方在调用时指定,我们认为props一旦指定了,一般情况下是不会变的,尤其是对于被调用组件来说,props的拥有者是其调用方,或者说在结构上是其parent,而state是私属于当前组件的,state值是可变的,认清楚这点,才不至于混用props和state。修改state的值,可以调用Component的setState()方法即可。state值的每次改变都会导致Components从当前状态进入update状态,从而重新render。
1、React Components在浏览器中存在的生命周期中的三个状态
1) Mounting:一个React Components被rander解析生成对应的DOM节点并被插入浏览器的DOM结构的一个过程。当能在浏览器上看到从无到有的时候,mounting已经结束了。mounting结束,就说React Components被mounted了。
2) Updating:一个mounted的React Components被重新render的过程。重新渲染的过程并不是说相应的DOM结构就一定会发生改变,React会React Components的当前state和最近一次的state进行对比,只有当state确实发生了改变,并且影响到DOM结构时,React才会去改变对应的DOM结构。
3) Unmounting:一个mounted的React Components对应的DOM节点被从DOM结构中移除的过程。
2、每一个状态React都封装了对应的多个库函数:will表示将要怎么怎么样,did表示已经怎么怎么样。
1) Mounting:在Mounting状态封装了四个库函数——componentWillMount()和componentDidMount()、getInitialState()、getDefaultProps()。
① componentWillMount():在mounting前被调用;
② componentDidMount():在mounting后被调用;
③ getInitialState():初始化Components state;
④ getDefaultProps():设置默认的props。
2) Updating:在Updating状态封装了四个库函数——componentWillUpdate()和componentDidUpdate()、componentWillReceiveProps()、shouldComponentUpdate()。
① componentWillUpdate():在updating前被调用;
② componentDidUpdate():在updating后被调用;
③ componentWillReceiveProps():当一个mounted的React Components将要接收新的props时调用,其函数参数就是新的props对象,可以在函数体内比较该函数参数和this.props,从而进行例如修改state的操作;
④ shouldComponentUpdate():在一个mounted的React Components已经接收到新的props和state之后判断是否有必要去更新DOM结构,其函数参数有两个,第一个参数是新的props对象,第二个参数是新的state对象,可以分别对比其跟this.props和this.state来决定是否有必要去更新DOM结构,该函数返回true表示更新,返回false表示跳过这次更新,不更新DOM结构。
一般很少重写上面四个函数。
3) Unmounting:在Unmounting状态只封装了一个库函数——componentWillUnmount()。
componentWillUnmount():当要把一个React Components销毁掉时,一般在这个函数中执行cleanup的操作,如释放内存资源、图片资源等,但一般用的非常少,这得益于浏览器内存的垃圾回收机制。
var Hello = React.createClass({ getInitialState: function() { alert('getInitialState'); return { fontSize: "15px" }; }, render: function() { return ( <div style={{fontSize: this.state.fontSize}}>Hello React!</div> ); }, componentWillMount: function() { alert('componentWillMount'); }, componentDidMount: function() { alert('componentDidMount'); var that = this; setTimeout(function() { that.setState({ fontSize: "30px" }) }, 1000); } }); setInterval(function() { ReactDOM.render( <Hello />, document.getElementById('content') ); }, 1000);
3、props和state的对比
Props往往是通过组件调用方在调用时指定,我们认为props一旦指定了,一般情况下是不会变的,尤其是对于被调用组件来说,props的拥有者是其调用方,或者说在结构上是其parent,而state是私属于当前组件的,state值是可变的,认清楚这点,才不至于混用props和state。修改state的值,可以调用Component的setState()方法即可。state值的每次改变都会导致Components从当前状态进入update状态,从而重新render。
相关文章推荐
- 浅谈慕课网React入门课程笔记(一)
- 浅谈慕课网React入门课程笔记(四)
- 浅谈慕课网React入门课程笔记(二)
- 慕课笔记--[课程]React入门
- React.js入门笔记(再续):评论框的实现
- React Native 入门课程(1)了解ReactNative
- 【2018版】Spring4.3入门视频课程——笔记(二)
- 【Stanford CNN课程笔记】神经网络入门
- react入门——慕课网笔记
- React入门笔记(一) — 深入理解JSX
- React入门基础(学习笔记)
- [机器学习入门] 李宏毅机器学习笔记-1(Learning Map 课程导览图)
- 深度学习入门课程笔记 神经网络
- 阮一峰react入门笔记
- 【2018版】Spring4.3入门视频课程——笔记(三)
- 【学习笔记】C#语言入门详解1.课程简介
- React.js 入门与实战课程思维导图
- react.js入门笔记
- 【机器学习入门】Andrew NG《Machine Learning》课程笔记之二 :基本概念、代价函数、梯度下降和线性回归
- 深度学习入门课程学习笔记06 反向传播