React生命周期全解和state避坑
来源:互联网 发布:杰奇小说源码 编辑:程序博客网 时间:2024/05/21 03:24
所谓的生命周期就是React中定制的一套执行函数的顺序
分为三个阶段,每一个阶段都有不同的函数执行顺序,值得注意的是实例化和销毁阶段执行一次,存在期是可以反复执行的:
1、组件实例化阶段
(在实例化阶段只会执行一次)
constructor
componentWillMount
render
componentDidMount
2、组件存在阶段
(在组件存在的阶段,每重新渲染一次,都会执行一遍)
componentWIllReceiveProps
shouldComponentUpdate(特别注意,如果返回false,则不会执行渲染,也会跳过render前后的钩子函数)
componnetWillUpdate
render
componentDidUpdate(渲染之后,可以通过ref或者findDOMNode,来操作DOM,当React运行在服务端是,不会被调用)
3、组件销毁阶段
componentWIllUnmount
React组件的生命周期,已经说忘了,那么我们需要看一下,贯穿整个生命周期的state和props是什么情况。
首先要明白:React的数据流是单向的
props:很好理解,就是向组件本身传递的参数。
你可以通过props对组件进行状态化处理,可以通过PropTypes(接受一个对象最为参数)进行参数验证
static propTypes={ data:PropTypes.shape({ id:PropTypes.string, ....... }).isRequired}
如果没有传进参数过来怎么办?使用defaultProps设置默认值
static defaultProps={ name:'No one'}
注意:
1、尽量props当作数据源,不要修改数据,作为只读数据,与子组件进行通信(包括数据和事件)
2、state存储简单的视图状态,在你setstate之后,你是获取不到state的值,state值的改变是在render之后才会改变,如果你要向父组件传递state的数据,那么componentDidMount中传递数据,或者通过setstate({state:’ss’},()=>{回调函数})实现,( 原因:setstate本质上是异步的。。。。。。jb)state尽量不要保存计算后的值,state可以接受一个函数,返回值为对象即可
this.setstate((state)=>{ return {state:'..'}});
  3、尽量使用setstate来设置state的值,不要直接修改(也可以直接修改,只不过不会引起渲染罢了)  4、当不需要内部状态,refs和生命周期的方法时,将组件变为函数组件,减少冗余。
- React生命周期全解和state避坑
- React(props+state+组件生命周期)
- react this.state + 组件生命周期
- 五、State和生命周期
- React Native State和Props
- [React-Native]Props和State
- React中的props和state
- React的props和state
- React中的props和state
- React---状态和生命周期
- React学习之State与生命周期基友情(四)
- React.js 官网资料摘记:State & 生命周期
- React state
- React中prop和state的区别
- React中prop和state的区别
- 浅谈React的props和state
- React中prop和state的区别
- React开发之Porps和State
- spring配置文件配置过程
- 【MySQL系列--优化1】——嵌套join优化
- 收藏记录
- [caioj] 问题 E: 单调队列3 (线段树)
- 推荐一个很好用的 Android Studio 插件
- React生命周期全解和state避坑
- HDU 6075 Questionnaire
- 图片的二次采样
- POJ3468 树状数组的区间更新和区间求和
- Hawq超过最大允许连接数
- Crawler4j 快速入门
- UML常用图的几种关系的总结
- SpringCloud之配置中心Git实例
- eclipse下安装和简单使用svn