组件对象的生命周期
组件对象的生命周期，指的是从组件对象产生到销毁的过程。
如下图所示:
生命周期的回调函数：你定义了，你没有调用，但是这个函数却执行了。如render()函数。也称为生命周期的“钩子函数”。
透明度改变动画-实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="test1"></div> <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script> <script 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('test1')); } componentDidMount() { //启动循环定时器 this.id_interval = setInterval(function(){ console.log(1); let {opacity} = this.state; opacity -= 0.1; if(opacity<=0){ opacity = 1; } this.setState({opacity}); }.bind(this),200) } componentWillUnmount() {//组件将被卸载前触发 clearInterval(this.id_interval); } render() { const {opacity} = this.state; //{{对象}}与{JS代码}的区别 return ( <div> <h2 style={{opacity:opacity}}>{this.props.msg}</h2> <button onClick={this.distroyComponent}>Click Me to unmount the component</button> </div> ) } } //2、渲染组件 ReactDOM.render(<Life msg="组件对象的生命周期"/>,document.getElementById('test1')); </script> </body> </html>
小结下，组件对象的生命周期流程分为3个阶段：
1、第一次初始化渲染显示：ReactDOM.render() ，只会执行一次
- constructor():创建对象初始化state
- componentWillMount():将要插入回调
- render():用于插入虚拟DOM回调
- componentDidMount():已经插入回调
2、每次更新：state.this.setState() ，可以执行N次
- componentWillUpdate() 将要更新回调
- render() 更新，进行重新渲染
- componentDidUpdate() 已经更新回调
3、移除组件：ReactDOM.unmountComponentAtNode(containerDOM)，只会执行一次
- componentWillUnmount():组件将要被移除回调
总的来说，有4个钩子比较重要：
- render
- componentDidMount
- componentWillUnmount
- componentWillReceiveProps
联想下 人的生命周期，从“出生-成长-死亡”，其实很类似这样的过程。
虚拟DOM与DOM Diff算法
DOM Diff 算法：只更新需要更新的部分。
虚拟DOM：在操作界面的过程中，界面是不会变的。
组件初始化过程：
- 1、创建虚拟DOM树
- 2、生成真实DOM树
- 3、绘制界面显示
思考：更新时，如何做到最小化重绘：
- 1、setState()更新状态
- 2、重新创建虚拟DOM树
- 3、新/旧树比较差异
- 4、更新差异对应真实DOM
- 5、局部进行重绘
