React的生命周期与应用
- 一、react组件的两种创建写法
- 二、组件的生命周期在不同状态下的执行顺序
- 三、组件各生命周期的应用
一、react组件的两种创建写法
第一种是 React.createClass
1 2 3 4 5 6 7 8 9 10 11 12 | React.createClass({ getDefaultProps() { return { key1:value1 } }, getInitialState() { return { state1:state1 } } }); |
第二种是用类的继承
1 2 3 4 5 6 7 8 9 10 11 12 | export defaultclass Test1 extends React.Component { constructor (props) { super(props); this.state = { state1: state1 } } static defaultProps = { data: 2, }; } |
getDefaultProps、getInitialState是在createClass时调用的方法，而在继承component类时，getDefaultProps方法对应给类添加静态属性 defaultProps ，getInitialState 对应在类的构造函数中设置 state属性
二、组件的生命周期在不同状态下的执行顺序
组件首次装载（first-Mount）： getDefaultProps() → getInitialState() → componentWillMount() → render() → componentDidMount()
卸载组件时（Unmount）：componentWillUnmount()
当重新装载组件时（Re-Mount）：getInitialState()→componentWillMount()→render() → componentDidMount()，但并不执行 getDefaultProps； defaultProps是放在组件类上的static属性
当再次渲染组件时（Re-Render），此时按顺序执行 componentWillReceiveProps(nextProps )(组件接收到新的props才会调用，只是改变state时不调用)→ shouldComponentUpdate→ componentWillUpdate→ render → componentDidUpdate。
在单页应用中，用react-router的history做页面跳转时，是将当前route的所有组件卸载，再跳转回来时是重新装载组件，而不是首次装载。
三、组件各生命周期的应用
3.1 getDefaultProps方法 或者 defaultProps 对象
1.只在组件类创建的时候调用一次，之后会被缓存起来。
2.defaultProps在组件实例之前创建，实例间共享。
3.会和父组件设置的props进行合并。
3.2 getInitialState方法或constructor的state属性
项目中会把组件用到的state初始化在这里。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | constructor (props) { super(props); this.state = { poi: null, activeTabId: null, cartCount: Shopcart.size(), domSize:{ headerHeight: 100, bannerHeight: 200, categoryTabHeight: 100, }, hiddenBanner: false //是否隐藏banner }; } |
3.3 componentWillMount()
组件初次render之前调用，如果在此方法中调用setState，render将感知到更新后的state，并且只执行这一次render，项目中还没有用到过这个方法，属于不常用的方法。
3.4 render()
1.组件渲染的方法，是组件唯一的必须实现的方法，在该方法中，我们可以通过props和state渲染不同的组件。返回null或者false代表不渲染任何东西。
1 2 3 4 5 6 7 8 9 10 11 | render () { return ( <header className="header-wrapper"> <div className="header header-normal"> {this.renderLeftComponent()} <span>{this.props.title || '美团商超'}</span> {this.renderRightComponent()} </div> </header> ); } |
3.5 componentDidMount()
组件装载后调用的方法，因为该方法调用的时候，组件已经装载，并且该方法不在render的循环当中，一般在该方法中做一些fetch数据或者改变state的方法。
还可以通过ReactDOM.findDOMNode(_this.refs.wrapper) 来获取DOM节点 进行操作。
1 2 3 4 5 6 7 8 9 | componentDidMount() { this.mounted = true; if(this.props.poi){ this.fetchCategoryTabs(this.props.poi.poiId); } if(!this.isCalculate) { this.calculateWidth(); } } |
3.6 componentWillReceiveProps(nextProps)
在组件接收到新的 props 的时候调用。在初始化渲染的时候，该方法不会调用。可以在该方法中判断，当props变化时，是否再去重新fetch数据，setState。
1 2 3 4 5 | componentWillReceiveProps (nextProps) { if(nextProps.poi &&(nextProps.poi != this.props.poi)) { this.fetchBannerList(nextProps.poi.poiId); } } |
3.7 shouldComponentUpdate(nextProps, nextState)
在接收到新的props或者state变化时，被调用，该方法在初始化渲染和forceUpdate的时候不会被调用。
默认返回true，如果返回false，则render不会执行。可以在这个方法中来阻止不必要的render，因为有时是因为父组件的render引起的子组件不必要的render。
1 2 3 4 5 6 7 8 9 | shouldComponentUpdate(nextProps, nextState) { const isStateChanged = Object.keys(nextState).some(key=> { return nextState[key] !== this.state[key] }); const isPropsChanged = Object.keys(nextProps).some(key=> { return nextProps[key] !== this.props[key] }); return isStateChanged || isPropsChanged } |
3.8 componentWillUpdate(nextProps, nextState)
在接收到新的 props 或者 state 之前立刻调用。在初始化渲染的时候该方法不会被调用。使用该方法做一些更新之前的准备工作。你不能在刚方法中使用 this.setState()。如果需要更新 state 来响应某个 prop 的改变，请使用 componentWillReceiveProps。 项目中应用不多。
3.9 componentDidUpdate
在组件的更新已经同步到 DOM 中之后立刻被调用。该方法不会在初始化渲染的时候调用。使用该方法可以在组件更新之后操作 DOM 元素。
有些操作可能需要操作DOM元素，并且在第一次componentDidMount时还没有达到条件，所以需要在componentDidUpdate时再做操作，但是componentDidUpdate在render的循环函数中，
所以需要设置变量做控制。 下面例子中 this.isCalculate 就是判断是否计算过的变量。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | componentDidMount() { this.mounted = true; if(this.props.poi){ this.fetchCategoryTabs(this.props.poi.poiId); } if(!this.isCalculate) { this.calculateWidth(); } } componentDidUpdate () { if(!this.isCalculate) { this.calculateWidth(); } } calculateWidth () { if(this.isCalculate) { return; } let tablist = this.state.categoryTabs; if(tablist.length == 0) { return; } let tabsDOM = this.refs.tablist, childrensDOM = tabsDOM.childNodes, container = this.refs.tabcontainer, wrapper = this.refs.wrapper, // 横向滚动宽度 scrollwidth = 5; for(let i=0; i<childrensDOM.length; i++){ let childDOM = childrensDOM[i]; scrollwidth += childDOM.clientWidth + parseInt(childDOM.style.marginRight); } scrollwidth = Math.max(tabsDOM.clientWidth,scrollwidth); this.setState({tabsWidth: scrollwidth + 'px'}); this.props.setCategoryTabHeight(wrapper.offsetHeight); this.isCalculate = true; } |
3.10 componentWillUnmount
在组件从 DOM 中移除的时候立刻被调用。在该方法中执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素。
可以记录组件的mount状态，在 componentDidMount 中设置this.mounted = true 。 在componentWillUnmount 中设置 this.mounted = false。
- 上一篇 »React第二篇：组件的生命周期
- 下一篇 »react新的生命周期