react的生命周期是什么？
生命周期是一个组件从生到死的一个过程，react为生命周期提供了一些关键节点，即会被触发的事件，来让组件方便处理各种场景
react的生命周期分为哪几个阶段？每个阶段的作用？
分为3个阶段，分别是：
1. Mounting（挂载阶段）——创建构造函数并初始化，让我们在页面加载完成前后做一些事情
2. Updating（运行阶段）——状态更新引起的变化，更新页面UI显示或数据更改
3. Unmounting（卸载阶段）——销毁一个组件，销毁前暴露出一个事件，让我们可以在组件销毁前做一些逻辑的处理，
比如组件销毁后，也要将组件的定时器销毁，减少内存占用
react各阶段事件节点有哪些？
挂载阶段
1. componentWillMount()-组件将要加载，但还没有加载出来，js逻辑已经可以执行, 异步方法可以放在这里执行
2. componentDidMount()-组件加载完成
运行阶段
1. componentWillUpdate()-组件将要更新
2. componentDidUpdate()-组件更新完成
卸载阶段
1. componentWillUnmount()-组件将要被销毁
还有2个比较特殊的
1. componentWillReceiveProps()-接收父组件传递过来的参数props时触发
2. shouldComponentUpdate()-判断组件是否需要更新, 它需要一个返回值，默认为true，若为false则组件不更新
react整个生命周期加载的过程
创建构造函数constructor并初始化，然后执行componentWillMount()将要加载，接着render()出来, 最后componentDidMount()加载完成
react更新的过程
首先执行shouldComponentUpdate(), 看返回值是不是true，如果是true则继续执行componentWillUpdate()将要更新，然后
render()，最后更新完毕componentDidUpdate()；若返回值为false，则组件不会更新。 如果是组件传值引起的数据改变，
需要在shouldComponentUpdate()执行前先执行componentWillReceiveProps()来接收父组件传递过来的值
演示shouldComponentUpdate() 可查看控制台打印结果
import React from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component { // constructor用来初始化组件属性，this.state定义数据，super()为了接收到父类的this指针 // 创建构造函数 constructor(props) { super(props); this.state = { data: 'Old State' } console.log('初始化数据', constructor); } // 组件将要加载,整个组件还没有加载出来，js逻辑已经可以执行, 异步方法可以放在这里执行 componentWillMount() { console.log('componentWillMount'); } // 组件加载完成 componentDidMount() { console.log('componentDidMount'); } // 接收父组件传递过来的参数props时触发 componentWillReceiveProps() { console.log('componentWillReceiveProps'); } // 判断组件是否需要更新,它需要一个返回值，默认为true shouldComponentUpdate() { console.log('shouldComponentUpdate'); return true; // 需要一个布尔返回值, 比如true或false来判断组件是否要根据值的变化而更新, } // 组件将要更新, 如果shouldComponentUpdate的返回值为true，那这个函数就要为组件更新做准备了 // 如果shouldComponentUpdate返回值为false，则组件不会更新，componentWillUpdate,componentDidUpdate都不会执行 componentWillUpdate() { console.log('componentWillUpdate'); } // 组件更新完成 componentDidUpdate() { console.log('componentDidUpdate'); } // 处理点击事件 handleClick() { console.log('更新数据'); this.setState({ data: 'New State' }) } // 把组件渲染到页面上 render() { console.log('render'); return ( <div> <h1>Props:{this.state.data}</h1> <button onClick={() => this.handleClick()}>更新数据</button> </div> ) } } ReactDOM.render( <div> <App /> </div>, document.getElementById('app') );
演示componentWillReceiveProps() 可查看控制台打印结果
import React from 'react'; import ReactDOM from 'react-dom'; class Father extends React.Component { constructor(props) { super(props); this.state = { data: 'Old Props' } console.log('初始化数据', constructor); } onPropsChange() { console.log('更新Props:'); this.setState({ data: 'New Props' }) } render() { return ( <div> <Son data={this.state.data} /> <button onClick={() => this.onPropsChange()}>改变props</button> </div> ) } } class Son extends React.Component { // constructor用来初始化组件属性，this.state定义数据，super()为了接收到父类的this指针 // 创建构造函数 constructor(props) { super(props); console.log('初始化数据', constructor); } // 组件将要加载,整个组件还没有加载出来，js逻辑已经可以执行, 异步方法可以放在这里执行 componentWillMount() { console.log('componentWillMount'); } // 组件加载完成 componentDidMount() { console.log('componentDidMount'); } // 接收父组件传递过来的参数props时触发 componentWillReceiveProps() { console.log('componentWillReceiveProps'); } // 判断组件是否需要更新,它需要一个返回值，默认为true shouldComponentUpdate() { console.log('shouldComponentUpdate'); return true; // 需要一个布尔返回值, 比如true或false来判断组件是否要根据值的变化而更新, } // 组件将要更新, 如果shouldComponentUpdate的返回值为true，那这个函数就要为组件更新做准备了 // 如果shouldComponentUpdate返回值为false，则组件不会更新，componentWillUpdate,componentDidUpdate都不会执行 componentWillUpdate() { console.log('componentWillUpdate'); } // 组件更新完成 componentDidUpdate() { console.log('componentDidUpdate'); } // 把组件渲染到页面上 render() { console.log('render'); return ( <div> <h1>Props:{this.props.data}</h1> </div> ) } } ReactDOM.render( <div> <Father /> </div>, document.getElementById('app') );
演示componentWillUnmount()可控制台查看打印结果
import React from 'react'; import ReactDOM from 'react-dom'; class Father extends React.Component { constructor(props) { super(props); this.state = { data: 'Old Props', hasChild: true } console.log('初始化数据', constructor); } onPropsChange() { console.log('更新Props:'); this.setState({ data: 'New Props' }) } onDestoryChild() { console.log('干掉子组件'); this.setState({ hasChild: false }) } render() { return ( <div> { this.state.hasChild ? <Son data={this.state.data} /> : null } <button onClick={() => this.onPropsChange()}>改变props</button> <button onClick={() => this.onDestoryChild()}>干掉子组件</button> </div> ) } } class Son extends React.Component { // constructor用来初始化组件属性，this.state定义数据，super()为了接收到父类的this指针 // 创建构造函数 constructor(props) { super(props); console.log('初始化数据', constructor); } // 组件将要加载,整个组件还没有加载出来，js逻辑已经可以执行, 异步方法可以放在这里执行 componentWillMount() { console.log('componentWillMount'); } // 组件加载完成 componentDidMount() { console.log('componentDidMount'); } // 接收父组件传递过来的参数props时触发 componentWillReceiveProps() { console.log('componentWillReceiveProps'); } // 判断组件是否需要更新,它需要一个返回值，默认为true shouldComponentUpdate() { console.log('shouldComponentUpdate'); return true; // 需要一个布尔返回值, 比如true或false来判断组件是否要根据值的变化而更新, } // 组件将要更新, 如果shouldComponentUpdate的返回值为true，那这个函数就要为组件更新做准备了 // 如果shouldComponentUpdate返回值为false，则组件不会更新，componentWillUpdate,componentDidUpdate都不会执行 componentWillUpdate() { console.log('componentWillUpdate'); } // 组件更新完成 componentDidUpdate() { console.log('componentDidUpdate'); } // 组建将要被销毁 componentWillUnmount() { console.log('componentWillUnmount'); } // 把组件渲染到页面上 render() { console.log('render'); return ( <div> <h1>Props:{this.props.data}</h1> </div> ) } } ReactDOM.render( <div> <Father /> </div>, document.getElementById('app') );
有需要的朋友可以领取支付宝到店红包，能省一点是一点
