React Native入门(十三)之组件的生命周期
前言React Native中组件的生命周期,也就是React.js中Component的生命周期。 图解首先来一张经典的生命周期的图: 首先 static defaultProps = {
name: 'mars',sex: 'boy',age: 10
};//设置默认属性
import PropTypes from 'prop-types';
static propTypes = {
name: PropTypes.string.isRequired,sex: PropTypes.string,age: PropTypes.number,};//设置属性的类型
①创建实例化阶段 constructor(props){
super(props);
this.state = {
like:false
};
}
②运行更新阶段 各个阶段回调函数
创建实例化阶段constructor() (ES6)构造函数,组件创建时调用,写法就是上边那种格式, this.state={
xx:xx,xx:xx,};
来初始化状态! componentWillMount()该回调方法在组件挂载前调用!这个函数调用时机是在组件创建,并初始化了状态之后,在第一次绘制 render() 之前。可以在这里做一些业务初始化操作,也可以设置组件状态。这个函数在整个生命周期中只被调用一次。 render()在组件渲染的时候调用!只允许返回一个最外层容器组件。render函数尽量保持纯净,只渲染组件,不修改状态,不执行副操作(比如计时器)。所以我们不要在render()函数里边做一些更改状态或者与服务器交互的操作! componentDidMount()在组件挂载之后调用!需要注意的是,RN 框架是先调用子组件的 运行更新阶段componentWillReceiveProps(object nextProps)该回调函数在接收到新的props时调用,一般是由父组件传递过来的!参数 shouldComponentUpdate(object nextProps,object nextState)该函数返回一个布尔值!由上图中可以看出,在接收到父组件属性,或者每次state更改的时候,都会调用该函数! 说到这里,顺便提一下 // 这个变量用来控制组件是否需要更新
var shouldUpdate = true;
// inst 是组件实例
if (inst.shouldComponentUpdate) {
shouldUpdate = inst.shouldComponentUpdate(nextProps,nextState,nextContext);
} else {
if (this._compositeType === CompositeType.PureClass) {
// 用 shallowEqual 对比 props 和 state 的改动
// 如果都没改变就不用更新
shouldUpdate =
!shallowEqual(prevProps,nextProps) ||
!shallowEqual(inst.state,nextState);
}
}
需要注意的是 关于 componentWillUpdate(object nextProps,object nextState)
render()跟初始化的时候一样,渲染函数。 componentDidUpdate(object prevProps,object prevState)组件更新渲染完成之后,就会调用改回调函数!因为到这里已经完成了属性和状态的更新了,此函数的输入参数变成了 prevProps 和 prevState。 销毁阶段componentWillUnmount()组件被卸载的时候调用。一般在componentDidMount里面注册的事件需要在这里删除。比如定时器,监听等! 更新方式此部分内容来自:React组件生命周期小结,写的很好,这里学习记录一下! 以下假设shouldComponentUpdate都是按照默认返回true的方式。
总结对生命周期进行一个整体的回顾: 上边的内容是在查阅一些资料文档博客之后的一个学习总结,对自己了解组件生命周期有很大的帮助,也非常感谢这些前辈的指引! 参考文章: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |