关于前端:React-Context的核心实现就5行代码

大家好，我卡颂。

很多我的项目的源码非常复杂，让人望而生畏。但在打退堂鼓前，咱们应该思考一个问题：源码为什么简单？

造成源码简单的起因不外乎有三个：

性能自身简单，造成代码简单
编写者功力不行，写的代码简单
性能自身不简单，但同一个模块耦合了太多功能，看起来简单

如果是起因3，那理论了解起来其实并不难。咱们须要的只是有人能帮咱们剔除无关性能的烦扰。

React Context的实现就是个典型例子，当剔除无关性能的烦扰后，他的外围实现，仅需5行代码。

本文就让咱们看看React Context的外围实现。

欢送围观朋友圈、退出人类高质量前端交换群，带飞

简化模型

Context的残缺工作流程包含3步：

定义context
赋值context
生产context

以上面的代码举例：

const ctx = createContext(null);function App() {    return (        <ctx.Provider value={1}>            <Cpn />        </ctx.Provider>    );}function Cpn() {    const num = useContext(ctx);    return <div>{num}</div>;}

其中：

const ctx = createContext(null) 用于定义
<ctx.Provider value={1}> 用于赋值
const num = useContext(ctx) 用于生产

Context数据结构（即createContext办法的返回值）也很简略：

function createContext(defaultValue) {  const context = {    $$typeof: REACT_CONTEXT_TYPE,    Provider: null,    _currentValue: defaultValue  };  context.Provider = {    $$typeof: REACT_PROVIDER_TYPE,    _context: context  };  return context;}

其中context._currentValue保留context以后值。

context工作流程的三个步骤其实能够概括为：

实例化context，并将默认值defaultValue赋值给context._currentValue
每遇到一个同类型context.Provier，将value赋值给context._currentValue
useContext(context)就是简略的取context._currentValue的值就行

理解了工作流程后咱们会发现，Context的外围实现其实就是步骤2。

外围实现

外围实现须要思考什么呢？还是以下面的示例为例，以后只有一层<ctx.Provider>包裹<Cpn />：

function App() {    return (        <ctx.Provider value={1}>            <Cpn />        </ctx.Provider>    );}

在理论我的项目中，生产ctx的组件（示例中的<Cpn/>）可能被多级<ctx.Provider>包裹，比方：

const ctx = createContext(0);function App() {    return (    <ctx.Provider value={1}>      <ctx.Provider value={2}>        <ctx.Provider value={3}>          <Cpn />        </ctx.Provider>        <Cpn />      </ctx.Provider>      <Cpn />    </ctx.Provider>  );}

在下面代码中，ctx的值会从0（默认值）逐级变为3，再从3逐级变为0，所以沿途生产ctx的<Cpn />组件获得的值别离为：3、2、1。

整个流程就像操作一个栈，1、2、3别离入栈，3、2、1别离出栈，过程中栈顶的值就是context以后的值。

基于此，context的外围逻辑包含两个函数：

function pushProvider(context, newValue) {    // ...}function popProvider(context) {    // ...}

其中：

进入ctx.Provider时，执行pushProvider办法，类比入栈操作
来到ctx.Provider时，执行popProvider办法，类比出栈操作

每次执行pushProvider时将context._currentValue更新为以后值：

function pushProvider(context, newValue) {    context._currentValue = newValue;}

同理，popProvider执行时将context._currentValue更新为上一个context._currentValue：

function popProvider(context) {    context._currentValue = /* 上一个context value */}

该如何示意上一个值呢？咱们能够减少一个全局变量prevContextValue，用于保留上一个同类型的context._currentValue：

let prevContextValue = null;function pushProvider(context, newValue) {    // 保留上一个同类型context value  prevContextValue = context._currentValue;  context._currentValue = newValue;}function popProvider(context) {  context._currentValue = prevContextValue;}

在pushProvider中，执行如下语句前：

context._currentValue = newValue;

context._currentValue中保留的就是上一个同类型的context._currentValue，将其赋值给prevContextValue。

以上面代码举例：

const ctx = createContext(0);function App() {    return (        <ctx.Provider value={1}>            <Cpn />        </ctx.Provider>    );}

进入ctx.Provider时：

prevContextValue赋值为0（context实例化时传递的默认值）
context._currentValue赋值为1（以后值）

当<Cpn />生产ctx时，获得的值就是1。

来到ctx.Provider时：

context._currentValue赋值为0（prevContextValue对应值）

然而，咱们以后的实现只能应答一层ctx.Provider，如果是多层ctx.Provider嵌套，咱们不晓得沿途ctx.Provider对应的prevContextValue。

所以，咱们能够减少一个栈，用于保留沿途所有ctx.Provider对应的prevContextValue：

const prevContextValueStack = [];let prevContextValue = null;function pushProvider(context, newValue) {    prevContextValueStack.push(prevContextValue);      prevContextValue = context._currentValue;    context._currentValue = newValue;}function popProvider(context) {    context._currentValue = prevContextValue;    prevContextValue = prevContextValueStack.pop();}

其中：

执行pushProvider时，让prevContextValue入栈
执行popProvider时，让prevContextValue出栈

至此，实现了React Context的外围逻辑，其中pushProvider三行代码，popProvider两行代码。

两个有意思的点

对于Context的实现，有两个有意思的点。

第一个点：这个实现太过简洁（外围就5行代码），以至于让人重大狐疑是不是有bug？

比方，全局变量prevContextValue用于保留上一个同类型的context._currentValue，如果咱们把不同context嵌套应用时会不会有问题？

在上面代码中，ctxA与ctxB嵌套呈现：

const ctxA = createContext('default A');const ctxB = createContext('default B');function App() {  return (    <ctxA.Provider value={'A0'}>      <ctxB.Provider value={'B0'}>        <ctxA.Provider value={'A1'}>          <Cpn />        </ctxA.Provider>      </ctxB.Provider>      <Cpn />    </ctxA.Provider>  );}

当来到最内层ctxA.Provider时，ctxA._currentValue应该从'A1'变为'A0'。思考到prevContextValue变量的唯一性以及栈的个性，ctxA._currentValue会不会谬误的变为'B0'？

答案是：不会。

JSX构造的确定意味着以下两点是确定的：

ctx.Provider的进入与来到程序
多个ctx.Provider之间嵌套的程序

第一点保障了当进入与来到同一个ctx.Provider时，prevContextValue的值始终与该ctx相干。

第二点保障了不同ctx.Provider的prevContextValue被以正确的程序入栈、出栈。

第二个有意思的点：咱们晓得，Hook的应用有个限度 —— 不能在条件语句中应用hook。

究其原因，对于同一个函数组件，Hook的数据保留在一条链表上，所以必须保障遍历链表时，链表数据与Hook一一对应。

但咱们发现，useContext获取的其实并不是链表数据，而是ctx._currentValue，这意味着useContext其实是不受这个限度影响的。

总结

以上五行代码便是React Context的外围实现。在理论的React源码中，Context相干代码远不止五行，这是因为他与其余个性耦合在一块，比方：

性能优化相干代码
SSR相干代码

所以，当咱们面对简单代码时，不要轻言放弃。仔细分析下，没准儿外围代码只有几行呢？