React_02 学习笔记

函数组件无生命周期，生命周期只有 类组件 才拥有。

生命周期函数指在某一时刻组件会自动调用并执行的函数。React 每个类组件都包含生命周期方法，以便于在运行过程中特定的阶段执行这些方法。例如：我们希望在第一次将其呈现到 DOM 时设置一个计时器 Clock 。这在 React 中称为 “安装”。我们也想在删除由产生的 DOM 时清除该计时器 Clock 。这在 React 中称为 “卸载”。

参考：React lifecycle methods diagram

完整的生命周期图

常用的生命周期图

constructor (props)

React 组件的 构造函数 在挂载之前被调用。在实现 React.Component 构造函数时，需要先在添加其它内容前，调用 super(props) ，用来将父组件传来的 props 绑定到继承类中。

只调用一次

constructor(props) {

super(props)

}

static getDerivedStateFromProps(nextProps, prevState)

此方法是 react 16.3 之后新增，会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state ，如果返回 null 则 不更新 任何内容。

此方法适用于罕见的用例，即当前组件的 state 的值在任何时候都取决于 props 传入。

render()

render() 方法是必需的，它主要负责组件的渲染，会被重复调用若干次

componentDidMount

它会在 组件挂载 后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。

shouldComponentUpdate(nextProps, nextState)

当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true 则组件 继续渲染 ，为 false 则当前组件 不会渲染 。首次渲染或使用 forceUpdate() 时不会调用该方法。此方法仅作为 性能优化的方式而存在。你也可以考虑使用内置的 PureComponent 组件，而不是手动编写 shouldComponentUpdate()。PureComponent 会对 props 和 state 进行 浅层比较 ，并减少了跳过必要更新的可能性。

当 this.setState() 修改了 state 中的数据后，当前组件将重新渲染，同时也会重新渲染子组件，但只会渲染当前组件子树（当前组件以其所有子组件）

// eslint-disable-next-line
import React, { PureComponent, Component } from 'react';
// 引入 js 工具库
import _ from 'lodash'

// 性能优化 PureComponent
// React 默认父组件数据更新，会让它对应下面的所有的子孙组件都 更新一次
// 而如果你子类继承自 PureComponent 父类，则它会帮我们进行浅层数据比对
// (基本类型值的比对 , 引用类型不行)

// class Child extends PureComponent {
class Child extends Component {

  // 性能优化的函数
// props, state 最新的 props 数据和 state 数据,老数据用 this.props 和 this.state
  // 要有返回值 true / false,
  // 为 false 时则不会进行 render 渲染 为 true 向下渲染视图
  shouldComponentUpdate(props, state) {
    // 引用类型比较地址，地址不一样，所以值相同，但返回 false
    // console.log(props === this.props);

    // return props.user.id !== this.props.user.id
    // return Object.keys(props.user).some(key => props.user[key] !== this.props.user[key])

    // 深比较
    // console.log(_.isEqual(props.user, this.props.user));
    return !_.isEqual(props.user, this.props.user)
  }

  // 挂载和更新都会执行，执行 N 次
  // 组件界面的渲染方法
  render() {
    console.log('child-render');
    return (
      <div>
        子组件
      </div>
    );
  }
}

export default Child;