前端技术分享：从Context源码实现谈React性能优化

学完这篇文章，你会收获：

1. 了解Context的实现原理

2. 源码层面掌握React组件的render时机，从而写出高性能的React组件

3. 源码层面了解shouldComponentUpdate、React.memo、PureComponent等性能优化手段的实现

我会尽量将文章写的通俗易懂。但是，要完全理解文章内容，需要你掌握这些前置知识：

1. Fiber架构的大体工作流程

2. 优先级与更新在React源码中的意义

如果你还不具备前置知识，可以先阅读React技术揭秘。

组件render的时机

Context的实现与组件的render息息相关。在讲解其实现前，我们先来了解render的时机。

换句话说，组件在什么时候render？

这个问题的答案，已经在React组件到底什么时候render啊 聊过。在这里再概括下：

在React中，每当触发更新（比如调用this.setState、useState），会为组件创建对应的fiber节点。

fiber节点互相链接形成一棵Fiber树。

有2种方式创建fiber节点：

1. bailout，即复用前一次更新该组件对应的fiber节点作为本次更新的fiber节点。

2. render，经过diff算法后生成一个新fiber节点。组件的render（比如ClassComponent的render方法调用、FunctionComponent的执行）就发生在这一步。

经常有同学问：React每次更新都会重新生成一棵Fiber树，性能不会差么？

React性能确实不算很棒。但如你所见，Fiber树生成过程中并不是所有组件都会render，有些满足优