初探React之生命周期
来源:互联网 发布:windows无法打开此文件 编辑:程序博客网 时间:2024/05/20 10:12
初探React之生命周期
目录
- 初探React之生命周期
- 目录
- 一周期的分类
- 二组件的生命周期
- 组件的实例化
- 存在期state和props的变化
- 组件的清除
参照官网教程学习后的总结
一、周期的分类
React的周期可分为三个阶段:
实例化
存在期
销毁&清理期
这三个阶段分别执行不同的任务。实例化是在React第一次生成真实的DOM时的周期,之后进入存在期。存在期React组件时时刻刻监听props 和 state的变化,当这两个属性发生变化时,组件重新render。清理期在组件从真实的DOM中移除时发生。
分别对应的函数是:
- 实例化
- getDefaultProps
- getInitialState
- componenetWillMount
- render
- componenetDidMount
- 存在期
- componenetWillReceiveProps
- shouldComponenetUpdate
- componenetWillUpdate
- render
- componentDidUpdate
- 销毁期
- componentWillUnmount
每个阶段的事件依次发生。
二、组件的生命周期
组件的实例化
React首先通过createClass创建组件。这时候组件首先调用getDefaultProps函数(此函数在创建组件是调用,并不是挂载时调用),来设置自己的props属性。假如这个组件有父组件的话,父组件依然可以在渲染时,通过如下方式设置子组件的props(关于父组件在什么阶段传值还未完全弄清楚,这里存疑)。
...render () { return (<div><childComponent property="1234" /></div>);}...
这个时候子组件可通过this.props.property来获取property的值1234。实际上在父组件给子组件传值的时候,一般采用这种方式。可以把这中方式看作一种“从上往下”的值传递方式。
之后调用getInitialState(Mounting之前调用),并且可通过this.state.data来获取state属性中的值。
...getInitialState () { return { data: ... ... }}...
需要注意的是,getInitialState和getDefaultProps都只运行一次。之后将会进行第一次渲染。
componentWillMount在进行第一次渲染(即render)之前发生,可以通过这个函数做一些事情,比如从服务器获取JSON数据,再通过setState来改变state的值(虽然改变了state的值,但是组件只会进行一次渲染)。
同样的componentDidMount在第一次渲染发生之后运行。在这里可以运行一些操作。
存在期state和props的变化
说起存在期,不得不提到的两个属性就是state和props。porps用于父组件向子组件的传值,子组件会监听props的变化,假如值发生了变化,则判断是否需要重新渲染。通过这种方式,父组件可以修改传递的值,来诱使子组件进行重新渲染,从而保持数据的统一性,这就是一种“从上而下”的单向数据绑定。
这时候用于监听的两个函数是:
componentWillReceiveProps(nextProps) {...shouldComponentUpdate(nextPorps, nextState) {...
componentWillReceiveProps在接受到新的props时调用,可以通过porps修改state的值。shouldComponentUpdate可以修改其返回值,使组件按照我们的想法来决定是否重新render,当函数返回true时需要重新渲染,此时调用componentWillUpdate函数。
componentWillUpdate(nextPorps, nextState) {...render() {...componentDidUpdate(prevPorps, prevState) {...
这些函数的功能和Mounting时差不多,不过Update函数会传入一些参数,同样可进行一些处理。
如果在组件在存在期通过setState改变了数据,也会触发组件的shouldComponentUpdate函数,从而触发组件进行重新渲染。和props不同的是setState需要组件自身来调用。
虽然setState只能通过组件自身调用,但是父组件将一个函数通过props传递给子组件,子组件可调用porps function来修改父组件的state,使父组件从新渲染,这是一种“从下而上”的方式。
父组件
...render () { return (<div><childComponent handler={this.handler}></div>);},handler(changedValue) { this.setState({ data: changedValue, ...});}...
子组件
... this.props.handler(value);...
组件的清除
componentWillUnmount函数在组件从DOM中移除时触发。可在这个函数中进行一些收尾工作。
componentWillUnmount() {...
- 初探React之生命周期
- 初探React之新发现
- React之生命周期
- React Native 之生命周期
- React Native之生命周期
- React Native之生命周期
- 10、react之 组件生命周期
- react入坑之生命周期
- React 初探
- React初探
- React 初探
- React-Native学习笔记之生命周期
- React Native实战之ReactJS组件生命周期
- react教程之组件的生命周期
- React-Native 初学之组件生命周期记录
- React系列之--组件的生命周期
- 前端开发之React组件生命周期
- React系列之生命周期深入解析
- int *ptr=(int *)(&a+1)
- HDU 5701 中位数计数
- java中注解的使用与实例(一)
- 搭建struts2的helloworld
- error C3859: 超过了PCH的虚拟内存范围;请使用“-Zm33”或更大的命令行选项重新编译
- 初探React之生命周期
- 网站服务,流量监控
- 1006. 换个格式输出整数
- MyEclispe 代码自动提示显示“No Default Proposals”解决方法
- Java动态代理-创建动态类及查看其方法列表信息
- 模块化编程
- 手机开发实战38——手机软件架构简介
- CSS里padding和margin的区别是什么?
- Android项目程序结构