react学习笔记之组件生命周期
2016-09-04 23:31
666 查看
React 中的组件有三种状态:
Mounted:已插入真实 DOM
Updating:正在被重新渲染
Unmounted:已移出真实 DOM
它为每个状态都提供了两种处理函数:
will:函数在进入状态之前调用,
did: 函数在进入状态之后调用,三种状态共计五种处理函数。
所以,除了组件初始化时调用的getDefaultProps,getInitialState方法外,每个组件还有
componentWillMount,componentDidMount,componentWillUpdate,componentDidUpdate,componentWillUnmount五种方法;
除此之外,react还提供了两种特殊状态的处理函数:
componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用
当一个组件被调用的时候先执行getDefaultProps,getInitialState获取他的默认属性和状态,然后执行componentWillMount(即将渲染),接下来渲染到dom树上,渲染完成触发componentDidMount函数;
这时候,该组件就进入了一个running状态,并监视他的props和state以及被移除事件:
当props发生变化时执行componentWillReceiveProps然后去判断是否需要重新渲染(shouldComponentUpdate),如果不需要则继续保持running状态;如果需要则如初始时一样,执行componentWillMount(即将渲染),接下来渲染到dom树上,渲染完成触发componentDidMount函数,保持running状态继续监视;
当state发生变化时,则直接判断是否需要重新渲染(shouldComponentUpdate),然后根据是否需要决定执行渲染过程还是继续保持running状态;
当该组件被移除(unmount)时,将直接执行componentWillUnmount,该组件从dom树上消失;
Mounted:已插入真实 DOM
Updating:正在被重新渲染
Unmounted:已移出真实 DOM
它为每个状态都提供了两种处理函数:
will:函数在进入状态之前调用,
did: 函数在进入状态之后调用,三种状态共计五种处理函数。
所以,除了组件初始化时调用的getDefaultProps,getInitialState方法外,每个组件还有
componentWillMount,componentDidMount,componentWillUpdate,componentDidUpdate,componentWillUnmount五种方法;
除此之外,react还提供了两种特殊状态的处理函数:
componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用
当一个组件被调用的时候先执行getDefaultProps,getInitialState获取他的默认属性和状态,然后执行componentWillMount(即将渲染),接下来渲染到dom树上,渲染完成触发componentDidMount函数;
这时候,该组件就进入了一个running状态,并监视他的props和state以及被移除事件:
当props发生变化时执行componentWillReceiveProps然后去判断是否需要重新渲染(shouldComponentUpdate),如果不需要则继续保持running状态;如果需要则如初始时一样,执行componentWillMount(即将渲染),接下来渲染到dom树上,渲染完成触发componentDidMount函数,保持running状态继续监视;
当state发生变化时,则直接判断是否需要重新渲染(shouldComponentUpdate),然后根据是否需要决定执行渲染过程还是继续保持running状态;
当该组件被移除(unmount)时,将直接执行componentWillUnmount,该组件从dom树上消失;
相关文章推荐
- 学习React Native 笔记(三)React组件的生命周期
- react学习笔记 item7 --- 组件的生命周期
- ReactJS学习笔记——组件复合及表单的处理
- reactjs学习笔记2--组件的介绍
- React学习笔记_无状态组件(Stateless Component) 与高阶组件
- react学习(6)——关于组件生命周期的问题
- React Native 学习-组件说明和生命周期
- React Native学习笔记之--组件之间数据的传递和跳转
- React学习:组件生命周期、组件间数据传递
- React学习笔记——如何创建React组件
- react-native笔记-----组件的生命周期
- React学习笔记之高阶组件应用
- React学习笔记—组件复用
- React Native 学习笔记(六) -- 组件的宽和高及flexbox布局
- React学习笔记---创建组件
- React学习笔记(6)---组件协同使用介绍
- React入门笔记(二) — 组件的生命周期
- React学习笔记-4-什么是生命周期
- angular4.x学习笔记 --组件以及生命周期
- 学习React Native 笔记(二)React组件