ReactJS学习系列课程(组件的生命周期)
来源:互联网 发布:商超软件排名 编辑:程序博客网 时间:2024/05/20 16:10
对于任何一个框架,或者组件而言,都有其生命周期的定义,比如从定义到销毁,会有一定的流程在其中控制,以前我们接触过IONIC, 不得不说这个框架对生命周期的定义是非常完美的,也为开发者提供了很多的便利。
那么,对于React而言,是基于Component的一个框架,那么我们今天来谈谈Componet的生命周期是一个什么样的状态呢?
组件的生命周期分成三个状态:
- Mounting:已插入真实 DOM
- Updating:正在被重新渲染
- Unmounting:已移出真实 DOM
React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。
- componentWillMount()
- componentDidMount()
- componentWillUpdate(object nextProps, object nextState)
- componentDidUpdate(object prevProps, object prevState)
- componentWillUnmount()
此外,React 还提供两种特殊状态的处理函数。
- componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
- shouldComponentUpdate(object nextProps, object
nextState):组件判断是否重新渲染时调用
对于常用前端框架的同学,不难看出,React的生命周期定义是不是很完美,个人感觉不差于IOS的object-c ,swift, 还有html5的IONIC, 当然这也只是个人看法,勿喷。
理论固然空虚,还是上代码吧,哈哈
var Hello = React.createClass({ getInitialState: function () { return { opacity: 1.0 }; }, componentDidMount: function () { this.timer = setInterval(function () { var opacity = this.state.opacity; opacity -= .05; if (opacity < 0.1) { opacity = 1.0; } this.setState({ opacity: opacity }); }.bind(this), 100); }, render: function () { return ( <div style={{opacity: this.state.opacity}}> Hello {this.props.name} </div> ); } }); React.render( <Hello name="world"/>, document.body );
上面代码在hello组件加载以后,通过 componentDidMount 方法设置一个定时器,每隔100毫秒,就重新设置组件的透明度,从而引发重新渲染。
这里也做一个小小的延伸,在React中我们定义class,要用className来定义,因为class是关键字哦。
还有 style的写法也不同,看看上面代码你就明白了!
怎么样,了解了吗?
0 0
- ReactJS学习系列课程(组件的生命周期)
- ReactJS学习系列课程(React 组件的组合使用)
- ReactJS学习系列课程(props 组件属性)
- ReactJS学习系列课程
- ReactJS学习系列课程(React ref的使用)
- ReactJS学习系列课程(React mixin的使用)
- ReactJS学习系列课程(React ref的使用)
- reactjs,组件的生命周期
- ReactJS组件的生命周期
- ReactJS学习系列课程1(ReactJS简介)
- ReactJS学习系列课程(JSX语法)
- ReactJS组件的生命周期详解
- ReactJS学习系列课程(React学习总结)
- ReactJS学习系列课程附加(Flux应用架构)
- ReactJS学习系列课程2(React环境搭建)
- ReactJS学习系列课程3(React State状态)
- ReactJS学习系列课程(React ES6语法使用)
- ReactJS学习系列课程(React Router 使用)
- 埃及分数
- 备用交换机
- Nginx安装与配置
- PHP与SQL 的基础知识
- ios多线程简介
- ReactJS学习系列课程(组件的生命周期)
- 268. Missing Number
- 操作系统的概述
- Java中List效率的比较
- AlertDialog.Builder.setCancelable(false)无效
- MicroSoft_SQLServer用法全笔记
- 如何获取注册高德Key使用的SHA1值与包名?
- 设计模式之观察者模式
- MUI动态加载数据后,scrollToBottom无效的解决方案