深入理解：React hooks是如何工作的

前言

在本文，我们将使用闭包实现一个React Hooks的微型版本。这么做有两个目的，一是演示闭包的效用，二是如何使用29行易读的JS代码实现Hooks。最后我们可以很自然的得到自定义Hooks。

闭包是什么？

Hooks的许多卖点之一是避免了类和高阶组件的复杂性。然而有些人觉得Hooks可能会导致另外的问题。虽然不需要再担心绑定上下文，现在我们需要担心闭包。正如Mark Dalgleish令人难忘的总结：

image.png

闭包是JS里的基本概念。众所周知对许多初学的开发者来说它们令人费解。Kyle Simpson在《你不知道的JS》中对闭包的著名定义如下：

闭包是：当一个函数在它的词法作用域之外执行的时候，仍然可以记得它的词法作用域且可以访问该作用域。

闭包很显然和词法作用域的概念紧密相关，在MDN是这么描述词法作用域的：“当函数被嵌套时，解析器解析函数的变量名的方式”。让我们来看一个实际的例子，可以更好的说明这一点：

// Example 0    
function useState(initialValue) {   
    var _val = initialValue //_val是useState创建的局部变量  
    function state() {  
      // state 是一个内部函数, 也是一个闭包  
      return _val // state() 使用了_val, 该变量由父函数声明 
    }   
    function setState(newVal) { 
      // 同样是内部函数    
      _val = newVal // 给_val赋值，而不用暴露_val    
    }   
    return [state, setState] //将这两个函数暴露到外部  
  } 
  var [foo, setFoo] = useState(0) // 使用了数组解构方法  
  console.log(foo()) // logs 0 - 我们给的初始值    
  setFoo(1) // 在useState的作用域内给_val赋值    
  console.log(foo()) // logs 1 - 尽管使用了相同的函数调用，得到的是新的初始值

这里，我们建立了React的 useState hook的原始版本。这里有2个内部函数，state和setState。state返回了上面定义的局部变量_val，setState将传给它的参数（即newVal）赋给该局部变量。

我们的state用getter函数实现，这并不完美，但我们将对此进行改进。这里重要的是，使用foo和setFoo，我们可以访问和操作（即所谓的“封闭”）内部变量_val。这两个函数保留了useState作用域的访问权，而这样的引用被称为闭包。放在在React和其他框架的上下文中，这看起来好像状态，实际上正是如此。

在函数式组件中的使用

让我们来把刚做出的useState功能应用到常见的程序中。下面来做一个计数器组件！

/// Example 1   
function Counter() {    
    const [count, setCount] = useState(0) // 和上面定义的 useState 相同 
    return {    
      click: () => setCount(count() + 1),   
      render: () => console.log('render:', { count: count() })  
    }   
  } 
  const C = Counter()   
  C.render() // render: { count: 0 }    
  C.click() 
  C.render() // render: { count: 1 }

这里我们没有把数据渲染到DOM上，而是仅在控制台输出这些状态。我们让计数器提供一个外部API，这样我们可以直接运行脚本，而不必给它设置click事件处理函数。

虽然这种做法也可以工作起来，调用getter函数来访问状态并不是React.useState hook的实际做法。我们来改进它。

不能更新状态的闭包实现

如果我们想要做得和实际的React hook一样，状态就应该是一个变量，而不是函数。如果我们简单的将_val暴露出去，而不是将它包裹在函数里面，就会出现bug：

// Example 0, 再来看第一个例子 - 这么做是有bug的! 
function useState(initialValue) {   
    var _val = initialValue 
    // 不使用state()函数 
    function setState(newVal) { 
      _val = newVal 
    }   
    return [_val, setState] // 直接对外暴露_val   
  } 
  var [foo, setFoo] = useState(0)   
  console.log(foo) // logs 0 不需要进行函数调用  
  setFoo(1) // 在useState作用域内给_val赋值 
  console.log(foo) // logs 0 - 糟糕!!

这是种闭包不能更新的问题。当我们从useState的输出中解构出foo变量时，foo的值等于对useState初始调用时的_val值，之后就不会再变了！这不是我们想要的结果，通常我们需要让组件的状态能反映出当前的状态，而且状态应该是一个变量而不是一个函数！这两个目标看起来不可兼得。

模块模式的闭包实现

我们可以解决这一useState难题……通过将闭包放进另一个闭包中！（我的天！听说你喜欢闭包……）

// Example 2    
const MyReact = (function() {   
    let _val // 将我们的状态保持在模块作用域中 
    return {    
      render(Component) {   
        const Comp = Component()    
        Comp.render()   
        return Comp 
      },    
      useState(initialValue) {  
        _val = _val || initialValue // 每次运行都重新赋值    
        function setState(newVal) { 
          _val = newVal 
        }   
        return [_val, setState] 
      } 
    }   
  })()

这里我们选择使用模块模式来制作我们的微型React hook。像React一样，它可以记录组件的状态（在这个例子中，它只能给每个组件记录一个状态，将状态记录在val中）。该设计允许MyReact渲染你的函数式组件，它可以在每次组件更新时使用和它相应的闭包，对内部的val赋值。

// 续Example 2   
function Counter() {    
    const [count, setCount] = MyReact.useState(0)   
    return {    
      click: () => setCount(count + 1), 
      render: () => console.log('render:', { count })   
    }   
  } 
  let App   
  App = MyReact.render(Counter) // render: { count: 0 } 
  App.click()   
  App = MyReact.render(Counter) // render: { count: 1 }

现在看起来更像React里的Hooks了。

复制useEffect功能

目前为止，我们已经实现了useState，这是最基本的React Hook。下一个重要的Hook是useEffect。不像setState，useEffect是异步执行的，这意味着更容易遇到闭包问题。

我们可以扩展这个微型React模型，加入下面代码：


// Example 3    
const MyReact = (function() {   
    let _val, _deps // 在作用域内保持状态和依赖 
    return {    
      render(Component) {   
        const Comp = Component()    
        Comp.render()   
        return Comp 
      },    
      useEffect(callback, depArray) {   
        const hasNoDeps = !depArray 
        const hasChangedDeps = _deps ? !depArray.every((el, i) => el === _deps[i]) : true   
        if (hasNoDeps || hasChangedDeps) {  
          callback()    
          _deps = depArray  
        }   
      },    
      useState(initialValue) {  
        _val = _val || initialValue 
        function setState(newVal) { 
          _val = newVal 
        }   
        return [_val, setState] 
      } 
    }   
  })()  
  // 使用方法   
  function Counter() {  
    const [count, setCount] = MyReact.useState(0)   
    MyReact.useEffect(() => {   
      console.log('effect', count)  
    }, [count]) 
    return {    
      click: () => setCount(count + 1), 
      noop: () => setCount(count),  
      render: () => console.log('render', { count })    
    }   
  } 
  let App   
  App = MyReact.render(Counter) 
  // effect 0   
  // render {count: 0}  
  App.click()   
  App = MyReact.render(Counter) 
  // effect 1   
  // render {count: 1}  
  App.noop()    
  App = MyReact.render(Counter) 
  // // no effect run   
  // render {count: 1}  
  App.click()   
  App = MyReact.render(Counter) 
  // effect 2   
  // render {count: 2}

为了追踪依赖项（因为useEffect只有在依赖项发生变化才会重新运行callback），我们引入了另一个变量_deps。

没有魔法，只是数组而已

我们已经很好的复制了useState和useEffect的功能，但是它们是实现得很差的单态（只允许一个状态，一个副作用，多了就会有bug）。为了让事情变得更有意思，我们需要扩展它使之可以接受任意数量的状态和副作用。幸运的是，正如Rudi Yardley所写的，React Hooks不是什么魔法，仅仅是数组而已。因此我们会使用到一个hooks数组。我们把val和deps全都放在同一个数组中，因为它们是互不干扰的。

// Example 4    
const MyReact = (function() {   
    let hooks = [], 
      currentHook = 0 // hooks数组, 和一个iterator!  
    return {    
      render(Component) {   
        const Comp = Component() // 运行 effects  
        Comp.render()   
        currentHook = 0 // 复位，为下一次render做准备 
        return Comp 
      },    
      useEffect(callback, depArray) {   
        const hasNoDeps = !depArray 
        const deps = hooks[currentHook] // type: array | undefined  
        const hasChangedDeps = deps ? !depArray.every((el, i) => el === deps[i]) : true 
        if (hasNoDeps || hasChangedDeps) {  
          callback()    
          hooks[currentHook] = depArray 
        }   
        currentHook++ // 本hook运行结束  
      },    
      useState(initialValue) {  
        hooks[currentHook] = hooks[currentHook] || initialValue // type: any    
        const setStateHookIndex = currentHook // 给setState的闭包准备的变量! 
        const setState = newState => (hooks[setStateHookIndex] = newState)  
        return [hooks[currentHook++], setState] 
      } 
    }   
  })()

// Example 4 续 - 使用hook 
function Counter() {    
    const [count, setCount] = MyReact.useState(0)   
    const [text, setText] = MyReact.useState('foo') // 第二个 state hook!  
    MyReact.useEffect(() => {   
      console.log('effect', count, text)    
    }, [count, text])   
    return {    
      click: () => setCount(count + 1), 
      type: txt => setText(txt),    
      noop: () => setCount(count),  
      render: () => console.log('render', { count, text })  
    }   
  } 
  let App   
  App = MyReact.render(Counter) 
  // effect 0 foo   
  // render {count: 0, text: 'foo'} 
  App.click()   
  App = MyReact.render(Counter) 
  // effect 1 foo   
  // render {count: 1, text: 'foo'} 
  App.type('bar')   
  App = MyReact.render(Counter) 
  // effect 1 bar   
  // render {count: 1, text: 'bar'} 
  App.noop()    
  App = MyReact.render(Counter) 
  // // no effect run   
  // render {count: 1, text: 'bar'} 
  App.click()   
  App = MyReact.render(Counter) 
  // effect 2 bar   
  // render {count: 2, text: 'bar'}

所以基本的思路是使用数组存放hook的状态和依赖，调用每个hook只需增加索引号操作相应的数组项，当组件render完毕后复位索引。

还可以很容易的实现自定义hooks：


// Example 4, revisited 
function Component() {  
    const [text, setText] = useSplitURL('www.netlify.com')  
    return {    
      type: txt => setText(txt),    
      render: () => console.log({ text })   
    }   
  } 
  function useSplitURL(str) {   
    const [text, setText] = MyReact.useState(str)   
    const masked = text.split('.')  
    return [masked, setText]    
  } 
  let App   
  App = MyReact.render(Component)   
  // { text: [ 'www', 'netlify', 'com' ] }  
  App.type('www.reactjs.org')   
  App = MyReact.render(Component)   
  // { text: [ 'www', 'reactjs', 'org' ] }}

这就是hooks的实际原理，自定义hooks只需简单的利用框架提供的原语，不管是React里的还是我们这里制作的微型hook版本都是如此。

使用hook的法则

现在你可以很容易理解使用Hooks的第一个法则：只在最顶层调用Hooks。因为我们使用currentHook变量，需要根据调用次序对React的依赖建模。你可以对照着我们的代码实现，去阅读Hooks法则的解释，就可以完全理解所有内容。

第二条法则，“仅在React函数中调用Hooks”。使用我们这一实现方法，这条法则不是必须遵守的，但是明确的界定代码的哪一部分依赖于有状态的逻辑是相当好的实践方式。（这也可以让我们更容易编写工具来确保遵守第一个法则。你不会在无意中包裹有状态的函数，在循环和条件语句中当成一般的函数包裹它们。遵守第二条法则有助于遵守第一条法则）

结论

到这里，我们已经把最初的例子扩展的很远了。你可以尝试使用一行代码实现useRef，或者让render函数接受JSX并挂载到DOM上，或者实现无数种其他重要的细节，在这28行的hook版本里我们忽略掉了。希望现在你已经收获一些在上下文中使用闭包的经验，并且在头脑中有一个有用的模型，可以解释React Hooks是如何工作的。

原文：https://www.netlify.com/blog/2019/03/11/deep-dive-how-do-react-hooks-really-work/

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,463评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,868评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,213评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,666评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,759评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,725评论 1赞 294
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,716评论 3赞 415
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,484评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,928评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,233评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,393评论 1赞 345
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,073评论 5赞 340
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,718评论 3赞 324
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,308评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,538评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,338评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,260评论 2赞 352