React技术栈-生命周期
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.生命周期概述
1>.什么是生命周期
组件对象从创建到死亡它会经历特定的生命周期阶段
React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调
我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作
2>.生命周期流程图
3>.生命周期详述
组件的三个生命周期状态:
* Mount：
插入真实 DOM
* Update：
被重新渲染
* Unmount：
被移出真实 DOM
React 为每个状态都提供了勾子(hook)函数
* componentWillMount()
* componentDidMount()
* componentWillUpdate()
* componentDidUpdate()
* componentWillUnmount()
生命周期流程:
第一次初始化渲染显示: ReactDOM.render()
* constructor():
创建对象初始化state
* componentWillMount() :
将要插入回调
* render() :
用于插入虚拟DOM回调
* componentDidMount() :
已经插入回调
每次更新state: this.setSate()
* componentWillUpdate() :
将要更新回调
* render() :
更新(重新渲染)
* componentDidUpdate() :
已经更新回调
移除组件:ReactDOM.unmountComponentAtNode(containerDom)
* componentWillUnmount() :
组件将要被移除回调
4>.重要的钩子
render():
初始化渲染或更新渲染调用
componentDidMount():
开启监听, 发送ajax请求
componentWillUnmount():
做一些收尾工作, 如: 清理定时器
componentWillReceiveProps():
后面需要时讲
二.生命周期案例
1>.HTML源代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>生命周期</title> </head> <body> <div id="box1"></div> </body> <!--导入 React的核心库--> <script type="text/javascript" src="../js/react.development.js"></script> <!--导入提供操作DOM的react扩展库--> <script type="text/javascript" src="../js/react-dom.development.js"></script> <!--导入解析JSX语法代码转为纯JS语法代码的库--> <script type="text/javascript" src="../js/babel.min.js"></script> <!--导入解析解析props属性的库--> <script type="text/javascript" src="../js/prop-types.js"></script> <script type="text/babel"> //1>.定义组件 class Life extends React.Component{ //定义构造器 constructor(props){ super(props) //初始化状态 this.state = { opacity : 1 } this.distroyComponent = this.distroyComponent.bind(this) } distroyComponent(){ ReactDOM.unmountComponentAtNode(document.getElementById("box1")) } //初始化定时器 componentDidMount(){ //启动循环定时器 this.intervalId = setInterval( function(){ console.log("定时器执行中......") //解构opacity变量 let {opacity} = this.state //修改opacity变量 opacity -= 0.1 if (opacity <= 0){ opacity = 1 } //设置opacity变量 this.setState({opacity}) }.bind(this), 200 ) } //定时器消亡时要执行的操作 componentWillUnmount(){ //清理定时器 clearInterval(this.intervalId) } //渲染 render(){ console.log("in render......") const {opacity} = this.state return ( /*注意，"style={{opacity:opacity}}"中的外面的大括号表示里面要写JS代码，而里面的大括号"{opacity:opacity}"表示一个对象哟~*/ <div> <h1 style={{opacity:opacity}}>{this.props.msg}</h1> <button onClick={this.distroyComponent}>不活了</button> </div> ) } } //2>.渲染组件标签 ReactDOM.render(<Life msg="react太难了!"/>,document.getElementById("box1")) </script> </html>
2>.浏览器打开以上代码渲染结果
