生命周期

其中标红的（ componentWillMount、 componentWillReceiveProps、 componentWillUpdate ）是 react 16.3 版本要移除的生命周期，移除原因：react 打算在17版本中，添加 async rendering ， react 将一个更新过程分为 render 前后两个阶段，render 前是可以被打断（比如有紧急任务），当生命周期被打断后，再次执行，并不会从断点继续执行，是重新执行的，所以这些生命周期就可能会运行多次。

同时为了弥补失去这三个生命，react 新增了两个生命周期： static getDerivedStateFromProps、 getSnapshotBeforeUpdate

static getDerivedStateFromProps

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

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

static getDerivedStateFromProps(nextProps, prevState) {  //根据nextProps和prevState计算出预期的状态改变，返回结果会被送给setState  //这是一个static，简单说应该是一个纯函数}复制代码

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。

getSnapshotBeforeUpdate 返回的值会做为第三个参数传递给 componentDidUpdate。

getSnapshotBeforeUpdate(prevProps, prevState) {  ...  return snapshot;}componentDidUpdate(prevProps, prevState, snapshot) {  }复制代码

性能优化

shouldComponentUpdate

这是一个组件的子树。每个节点中，SCU 代表 shouldComponentUpdate 返回的值，而 vDOMEq 代表返回的 React 元素是否相同。最后，圆圈的颜色代表了该组件是否需要更新。

react 父组件触发更新时，它的所有子组件都会触发更新（即使 props 和 state ）并没有改变，这样时候我们在子组件中添加 shouldComponentUpdate 生命周期，判断状态是否变更，如果没有变更返回 false , 这个子组件就不会重新 render。

React.PureComponent

React.PureComponent 是 React 自动帮我们在 shouldComponentUpdate 做了一层浅比较。

if (this._compositeType === CompositeTypes.PureClass) {  shouldUpdate = !shallowEqual(prevProps, nextProps)  || !shallowEqual(inst.state, nextState);}复制代码

React.memo

React.memo 是一个高阶组件，类似于 React.PureComponent，不同于 React.memo 是 function 组件，React.PureComponent 是 class 组件。

const MyComponent = React.memo(function MyComponent(props) {  /* 使用 props 渲染 */});复制代码

长列表优化

虚拟列表：用数组保存所有列表元素的位置，只渲染可视区内的列表元素，当可视区滚动时，根据滚动的 offset 大小以及所有列表元素的位置，计算在可视区应该渲染哪些元素。常用库（ react-window 、 react-virtualized ）

事件代理：简单的说就是将同类行的子元素事件，绑定在一个父元素上，从而达到减少事件的注册。

懒加载：常用于长列表图片加载，组件先不渲染，当监听到组件可以时，在去渲染组件。常用库（ react-lazyload ）

key

key 帮助 React 识别哪些元素改变了，比如被添加或删除。当子元素拥有 key 时，React 使用 key 来匹配原有树上的子元素以及最新树上的子元素。正确的使用 key 可以使 react 的更新开销变小。


      
     Duke
  
     Villanova
    
      
     Connecticut
  
     Duke
  
     Villanova
    
复制代码

代码复用

Mixin

概念：将公用方法包装成 Mixin 方法，然后注入各个组件，从而实现代码复用。（已经不推荐）

缺点：

命名覆盖：比如你在 A Mixin 中定义的 get 方法，在 B Mixin 中也定义了 get 方法。

复杂度高后，容易混乱：比如 Mixin 中可以调用 setState 的，当多个 Mixin 中都调用了 setSate , state 的更新来源会变得混淆不清。

ES6 class 语法不支持 Mixin。

HOC（高阶组件）

概念：可以理解为组件工厂，传入原始组件，添加功能，返回新的组件。

缺点：

命名覆盖，难以溯源：当存在多个 HOC 时，仅仅通过新组件，并不能知道 props 是来源于哪个 HOC，同时如果两个工厂，传入了相同名称的props，就会产生覆盖。

静态构建：工厂返回的新组件，不会立即执行，即 HOC 工厂函数里定义的生命周期函数只有新组建渲染时才会执行。

Render Props

概念：Render Props 就是一个 render 函数作为 props 传递给了父组件，使得父组件知道如何渲染子组件。

优点：

解决了命名冲突，难以溯源的问题，可以通过 render props 的参数直接看到 props 来源于哪个组件。

动态构建，可以更好的利用组件内的生命周期。

缺点：

无法利用 shouldComponentUpdate 来实现渲染性能的优化。

React hooks

概念：hooks 遵循函数式编程的理念，主旨是在函数组件中引入类组件中的状态和生命周期，并且这些状态和生命周期函数也可以被抽离，实现复用的同时，减少函数组件的复杂性和易用性。

hooks api：

基础：useState、 useEffect、 useContext

额外：useReducer、 useCallback、 useMemo、 useRef、 useImperativeHandle、 useLayoutEffect、 useDebugValue

一个简单的 custom hooks：

import { useEffect } from 'react';function useTitle(title){  useEffect(()=>{    document.title = title;  }, [title]);}复制代码

虚拟 Dom diff 算法

虚拟 Dom：react 将 Dom 抽象成一个对象树，通过对比新旧两个树的区别（diff 算法），然后将更新部分渲染出来。

diff 算法基于两个策略：

两个相同组件产生类似的 DOM 结构，不同的组件产生不同的 DOM 结构。

对于同一层次的一组子节点，它们可以通过唯一的 id 进行区分。

逐层进行节点比较

在 react 中，树的比对非常简单，react 只会对两棵树进行逐层比较，即比较处于同一层级的节点。

节点比较

节点比较分成两种情况：（1）节点类型不同，（2）节点类型相同，属性不同。

情况（1）：

// DOM Diff 操作C.destroy();D = new D();A.append(D);复制代码

情况（2）：

//变更钱
    
//变更后
    
     
//执行操作=> removeStyle fontSize=> addStyle color 'red'复制代码

列表节点的比较（key）

当列表中插入 F 节点，如下图：

这个时候就会有两种情况：（1）节点没有表示唯一 key ，（2）节点表示了唯一 key

情况（1）结果如下图：

//执行过程C unmountD unmountE unmountF mountC mountD mountE mount复制代码

情况（2）结果如下图：

//执行过程F mount复制代码

React 16.x 部分新特性

Error Boundaries

如果在组件的渲染或生命周期方法中引发错误，整个组件结构就会从根节点中卸载，而不影响其他组件的渲染，可以利用 error boundaries 进行错误的优化处理。

class ErrorBoundary extends React.Component {  constructor(props) {    super(props);    this.state = { hasError: false };  }  static getDerivedStateFromError(error) {    // Update state so the next render will show the fallback UI.    return { hasError: true };  }  componentDidCatch(error, info) {    // You can also log the error to an error reporting service    logErrorToMyService(error, info);  }  render() {    if (this.state.hasError) {      // You can render any custom fallback UI      return Something went wrong.
;    }    return this.props.children;   }}复制代码

createPortal

react 支持将组建挂在到其他 dom 节点，事件还是按组件原有位置冒泡。

render() {  return ReactDOM.createPortal(    this.props.children,    domNode,  );}复制代码

Fiber

Fiber 是对 react 核心算法 reconciliation 的更新实现，将原本的同步更新分成两个阶段。阶段1（Reconciliation Phase）的任务是片段化执行的，每个片段执行完成之后，就会把控制权重新交给 react 调度模块，如果有更高优先级的任务就去处理，而低优先级更新任务所做的工作则会完全作废，然后等待机会重头再来，如果没有就执行下一个片段。阶段2（Commit Phase）是同步执行的，reactDom 会根据阶段1计算出来的 effect-list 来更新 DOM 。

阶段1涉及的生命周期（可能会执行多次）：componentWillMount、 componentWillReceiveProps、 shouldComponentUpdate、 componentWillUpdate

阶段2涉及的生命周期：componentDidMount、 componentDidUpdate、 componentWillUnmount

createContext

全新的 Context API 可以很容易实现祖先节点和子节点通信，并且没有副作用。

React.createContext 是一个函数，它接收初始值并返回带有 Provider 和 Consumer 组件的对象

Provider 发布方

Consumer 订阅方

const ThemeContext = React.createContext('light');class ThemeProvider extends React.Component {  state = {
   theme: 'light'};  render() {    return (      
    
             {this.props.children}      
        );  }}class ThemedButton extends React.Component {  render() {    return (      
    
             {theme => 
     }      
        );  }}复制代码

生命周期函数的更新（见上文）

React.memo（见上文）

lazy / Suspense

React.lazy() 提供了动态 import 组件的能力，实现代码分割。

Suspense 作用是在等待组件时 suspend（暂停）渲染，并显示加载标识。

import React, {lazy, Suspense} from 'react';const OtherComponent = lazy(() => import('./OtherComponent'));function MyComponent() {  return (    
    
     
      Loading...
     
}>      
         
      );}复制代码