在React-Native开发中,组件的生命周期和我们密不可切,了解生命周期利于我们观察组件的变化过程。组件生命周期可以先简单分为三个阶段:实例化、存在和销毁。
实例化阶段
getDefaultProps
用于设置初始化默认props属性。
getInitialState
用于设置初始化默认state属性,ES5一般使用的语法。在ES6中推荐使用state初始在constructor中实现。
componentWillMount
渲染之前调用,主要是在组件被首次渲染之前做些操作,比如要在首次渲染之前修改一些初始state,并且this.setState不会多次触发渲染,整个生命周期执行一次。
Render
组件的渲染函数,返回JSX或其他组件,用于开始渲染生成虚拟DOM。
componentDidMount
渲染之后调用一次,此时组件已经首次加载出来了。一般这里适合进行组件的初始化后的一些操作,比如发起网络请求等等。
存在阶段
componentWillReceiveProps
如果组件接收到新的props会调用,带有参数nextProps,是即将被设置的属性,这时的this.props看还可以表示旧的属性,因此可以根据两者的变化来选择性地执行相应的函数。
shouldComponentUpdate
如果组件接收到新props和改变state后会调用,shouldComponentUpdate带有两个参数:nextProps 和 nextState,都表示即将被设置的属性和状态。通过返回的bool类型判定组件是否需要更新渲染,默认返回true,常用于性能优化减少不必要的页面渲染。
componentWillUpdate
如果shouldComponentUpdate返回true后将调用此方法,即更新渲染之前调用,表示组件即将被更新渲染。值得一提的是,这个函数里面,你不能使用this.setState来修改状态。
componentDidUpdate
更新渲染之后被调用,此函数中组件UI已经更新渲染完成,带有参数prevProps和prevState,分别代表了渲染结束组件的参数和状态。
销毁阶段
componentWillUnmount
组件移除之前被调用,通常是做清理操作,比如取消定时器。
海说软件会持续推出前端教学课程、技术干货。