react生命周期分享,无论你是否看过!!!
一、基础先来介绍一个生命周期的定义: // Mounting 安装阶段 // 在客户端和服务器上,在初始渲染发生之前立即调用一次 如果在这个方法中调用setState, // render()将看到更新的状态,并且只会执行一次,尽管状态改变。 2) // Mounting 安装阶段 // 调用一次,只在客户端(不在服务器上),在初始渲染发生后立即 // 子组件的componentDidMount()方法在父组件的componentDidMount()方法之前被调用 // setTimeout setInterval AJAX 在此之行,强烈建议 3) // Updating 更新阶段 // 在组件接收新props时调用。初始渲染不调用此方法。 // 老的props可以用this.props 新值就用nextProps查看 // 在此函数中调用this.setState()不会触发附加的渲染。 4) // Updating 更新阶段 // 当正在接收新的道具或状态时,在渲染之前调用。 // 此方法必须返回false or true 否则报错 true则渲染,false则不渲染!在此声明周期中可以考虑是否需要进行渲染!避免不必要的性能浪费 // 如果shouldComponentUpdate返回false,那么render()将被完全跳过,直到下一个状态改变。此外,不会调用componentWillUpdate和componentDidUpdate。 // 默认返回true // 如果性能是一个瓶颈,特别是有几十个或几百个组件,请使用shouldComponentUpdate来加快您的应用程序。 // return true or false 5) // Updating 更新阶段 // 当正在接收新的props或state时立即调用。初始渲染不调用此方法 // 您不能在此方法中使用this.setState()。如果您需要更新state以响应prop更改,请改用componentWillReceiveProps。 6) // Updating 更新阶段 // 在组件的更新刷新到DOM后立即调用。初始渲染不调用此方法。 // 当组件已更新时,使用此操作作为DOM操作的机会 7) // Unmounting 卸载阶段 // 在组件从DOM卸载之前立即调用。 // 在此方法中执行任何必要的清理,例如使计时器无效或清除在componentDidMount中创建的任何DOM元素。clearInterval or destroy 二、生命周期的执行顺序举例:只有一个组件,里面有一个onClick事件改编一个state 刷新页面: a、componentWillMount---> // 可以更改state render()----> componentDidMount // 周期结束 触发onClick事件:(前提只有事件中出发setState,其他中没有) shouldComponentUpdate中 return true shouldComponentUpdate--> componentWillUpdate--> render()--> componentDidUpdate //周期结束 shouldComponentUpdate中 return false shouldComponentUpdate //周期结束 上面只是一个很简单的例子讲述了周期的执行顺序,大家可以根据顺序去做相应的操作,当然在 举例:父、子组件,父组件和上述相同,字段件只是一个纯ui组件没有任何的操作,接受父组件传来的props(父组件的click可控制props的内容)。 刷新页面: 父componentWillMount--->父render()---->子componentWillMount--->子render()--->子componentDidMount--->父componentDidMount 触发onClick事件: 子组件shouldComponentUpdate 返回的是false 父shouldComponentUpdate-->父componentWillUpdate-->父render()-->父componentDidUpdate 子组件shouldComponentUpdate 返回的是true 父shouldComponentUpdate-->父componentWillUpdate-->父render()--->子componentWillReceiveProps--->子shouldComponentUpdate--->子componentWillUpdate---->子render()--->子componentDidUpdate--->父componentDidUpdate componentWillUnmount阶段 给出一段代码:(就是上述的子组件) import React,{ Component } from 'react'; class Another extends Component { constructor(props) { super(props); this.state = { son:'子组件' } } componentWillMount() { console.log('子组件--Mounting-componentWillMount',this.state.son) } componentDidMount() { console.log('子组件--Mounting-componentDidMount',this.state.son) } componentWillReceiveProps(nextProps) { console.log('子组件--Updating-componentWillReceiveProps') } shouldComponentUpdate(nextProps,nextState) { console.log('子组件--Updating-shouldComponentUpdate') return true } componentWillUpdate(nextProps,nextState) { console.log('子组件--Updating-componentWillUpdate') } componentDidUpdate(nextProps,nextState) { console.log('子组件--Updating-componentDidUpdate') } componentWillUnmount() { } render() { return( <div> 我是子组件--我是子组件--我是子组件{this.props.name} </div> ) } } export default Another; 根据上面的代码,说一个组件实例的初始化的方法过程 1)`getInitialState` 设置初始状态值,(掉调用一次),可使用setState方法更改状态 es6语法则在这是用: constructor(props) { super(props); this.displayName='name'; this.事件名=this.事件名.bind(this);//绑定事件的this,这样初始化只绑定一次,如果在render中邦定,则只要render就邦定一次。 this.state = { son:'子组件' } } static propTypes = { value:PropTypes.string,//类型的种类object string array func number bool any } static defaultProps={ value:'1' } 2)`getDefaultProps `设置初始props的值,不可以更改 es6语法参照上面的 static defaultProps 3)`propTypes `验证传递给组件的props es6语法上述 static propTypes 4)`displayName `用于degbug调试消息,如果不写,JSX将从变量赋值中推断出类的displayName,es6语法如上述代码片段中,例如下面 // Input (JSX): var Nav = React.createClass({ }); // Output (JS): var Nav = React.createClass({displayName: "Nav",}); 执行的顺序就是上述代码片段的顺序! 三、总结 详细了解生命周期的特性,有助于处理数据,更好的节约性能。本人一点点小的见解,还望各位路过的大神,赏脸批评指正! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- react: 组件初识 && 生命周期 && 相关说明
- 关于RTMP,RTMPT,RTMPS,RTMPE,RTMPTE,RTMFP,AMF协议的介绍
- 李佳琦、毛毛姐、刘二豆等抖音网红都是怎么包装+运营自己的
- xml – 在XSLT上进行HTML编码
- ssh与ajax结合之json异常:org.apache.struts2.json.JSONEx
- Core Data 详解
- c#利用Grahics进行图片裁剪
- c# – 数据绑定枚举属性到网格和显示描述
- Flex HTTPService 读取XML并显示在 Tree 中
- react-native ListView的属性flexWrap为wrap失效解决