React中组件的生命周期

react 创造组件

// 创造组件的方式
// 方式一：使用class
// class Welcome extends React.Component {
//   render() {
//     return <h1>Hello, {this.props.name}</h1>;
//   }
// }

// 方式二：使用函数
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
export default Welcome

引用：

ReactDOM.render(
  <Welcome name="hexon"/>,
  document.getElementById('root')
)

记住：组件不能修改它得到的props

state

组件不能改变它得到的props，那么组件中可以变的东西放在state中
注意：函数形式的组件不支持state

如何改变state

如果是直接通过给this.state赋值，是无法改变state的，必须通过this.setState来改变。

关于setState，一定要看这篇文章：setState：这个API设计到底怎么样

关于setState需要理解以下几点：

• setState不会立刻改变React中state的值
• 多次setState函数调用产生的效果会合并，可以理解为多次调用，只有一次生效
• 了解函数式的setState用法

---

React中组件的生命周期

主要有三个阶段：mount（挂载）、update（更新）、unmount（移除）

mount（挂载阶段）

mount就是第一次让组件出现在页面中的过程。关键就是render()方法，React会将render()的返回值（一般是虚拟DOM、也可以是DOM或null）插入到页面中。

这个时候会暴露几个钩子函数供我们往其中添加代码，如下：

• constructor()
• componentWillMount()
• render()
• componentDidMount() ：一般在该阶段进行ajax操作
  图片展示过程如下：

image.png

---

update（更新阶段）

mount之后，如果数据有任何变动，就会来到update过程，这个过程有5个钩子：

• componentWillReceiveProps(nextProps) —— 已挂载的组件，在接收到新的props之前调用该函数
• shouldComponentUpdate(nextProps, nextState) —— 询问是否要更新组件？如果返回false，则不会往下执行，终止组件更新；如果返回true，则继续往下执行,可以在该函数内添加一些判断，跳过不需要被更新的组件，提升性能
• componentWillUpdate() —— 我要更新组件了
• render() —— 更新
• componentDidUpdate() —— 更新完毕了: 比较适合发送ajax到服务器端的函数，可以在该生命周期函数中对输入的新props与旧props进行比较，来决定是否发送请求到服务器端

---

unmount（移除阶段）

当一个组件要从页面中移除时，会进入到unmount阶段，该阶段有一个钩子函数：

• componentWillUnmount() —— 我要被移除了

我们可以在移除之前做一些清理工作

---

既然React中一个组件的生命周期包含有这么三个阶段，同时，我们说要改变state只能通过setState进行修改，那么可以在哪些阶段使用setState对state进行更新呢？
一般而言，只在以下几个钩子函数中调用setState：

• componentWillMount()
• componentDidMount()
• componentWillReceiveProps()
• componentDidUpdate()

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Number extends Component {
  constructor(props) {
    super(props);
    console.log('%c constructor 子组件已构造', 'font-weight: bolder', 'color: blue');
  }

  componentWillMount() {
    console.group('%c React挂载', 'color: #00d8ff');
    console.log('%c componentWillMount 组件即将挂载', 'font-weight:bold')  
  }
  componentDidMount() {
    console.log('%c componentDidMount 组件已挂载', 'font-weight:bold')
    console.groupEnd();
  }
  componentWillReceiveProps(newProps) {
    console.group("%c React Updating", 'color: green')
    console.log('%c componentWillReceiveProps 组件即将接收props', 'font-weight:bold', '')
    console.log('newProps', newProps.counter)
    console.log('this.props', this.props.counter)
  }
  shouldComponentUpdate(newProps, newState) {
    const result = true
    console.info(`%c shouldComponentUpdate 返回判断是否要更新组件 ${result}` , 'font-weight:bold;color: #236fd4')
    if (!result) console.groupEnd()
    return result;
  }
  componentWillUpdate(nextProps, nextState) {
    console.log('%c componentWillUpdate 组件即将更新', 'font-weight:bold', '')
    console.log('nextProps', nextProps.counter)
    console.log('this.props', this.props.counter)
  }
  componentDidUpdate(prevProps, prevState) {
    console.log('%c componentDidUpdate 组件已更新', 'font-weight:bold', '')
      console.log('prevProps', prevProps.counter)
      console.log('this.props', this.props.counter)
      console.groupEnd();
  }
  componentWillUnmount() {
    console.group("%c React Unmounting", 'color: brown')
    console.log('%c componentWillUnmount 组件即将卸载','font-weight:bold' , 'color: gray')
    console.groupEnd();
  }
  render() {
    console.log('%c render 组件渲染中...', 'font-weight:bold', '')
    console.log('this.props.counter', this.props.counter)
    return <p>{ this.props.counter }</p>
  }
 }
 
 class LifecycleCounter extends Component {
   constructor(props) {
     super(props);
     this.state = {
       counter: 0
     }
   }
   addOne() {
     this.setState((prevState) => ({
       counter: prevState.counter + 1
     }))
   }
   unMount() {
     console.info(ReactDOM.unmountComponentAtNode(document.getElementById('root')));
   }
   update() {
     this.forceUpdate();
   }
   render() {
     return (
       <div className="LifecycleCounter">
        <Number counter={this.state.counter}></Number>
        <button onClick={() => this.addOne()}>增加一</button>
        <button onClick={() => this.update()}>强制更新</button>
        <button onClick={() => this.unMount()}>卸载</button>
       </div>
     )
   }
}
export {
  LifecycleCounter
}