第三十四期：逆向思维来学习前端

如何在不看源码的情况下推测源码中的内容

如何在不看源码的情况下推测源码中的内容，这个问题是在写React的项目的时候闪现出来的。

很多时候，我们写业务代码的时候，实际上对我们写的js函数并不关心，只要功能实现了，其实不管代码写的好坏，看起来似乎没什么影响。

事实上也确实如此，功能我都实现了，哪里还用去考虑我的代码写的漂亮与否呢？

这种想法好，也不好。好是好在功能写完就完事儿了，可以对业务进行快速迭代，对紧急任务进行处理。不好是因为，长此以往，对个人能力的提升并无益处。

所以在写的时候，如果有时间的话，不妨还是多思考一下为好。

那么有可能又这么一个场景，比如我对React的useState钩子函数比较熟悉，而且项目里我也经常用到这个钩子函数，我想知道它的实现过程，但是我又没时间去看它的源码，或者源码我根本也看不懂。

这个时候该怎么办呢？

我们不妨用逆向思维去分析，去推测它的实现过程。

以React的钩子函数useEffect()为例，它的写法大致如下：

import React,{useEffect} from 'react'

export ({...props}) => {
  const { id } =  props
  
  useEffect(()=>{
    // 一些操作
  },[id])
  
  return (
  <div>my name is terrence</div>
  )
}

从上面的代码里我们能获得哪些信息呢？

• 一个组件
• 组件里有useEffect方法
• useEffect有两个参数
• useEffect第一个参数是个函数function
• useEffect第二个参数是个数组
• 组件是个函数，返回了一个dom

从我们已经知道的信息: 组件其实是一个类的实例，不管是函数组件，还是类组件，都是组件类的实例。

加上我们上面分析出来的信息，我们可以得出以下结论：

假设组件类的构造函数是一个模板方法，模板概念方法如下：

class Component {
  
  props:Object,
  
  componentDidmount:Funciton,
  
  render:Function

}

那么useEffect钩子函数应该处于哪个位置呢？

抛开那些复杂的逻辑，钩子函数其实也是模板中的一个方法，只是它被用来隔离变化而已，当模板中的某些属性发生变化时，钩子函数会执行不同的策略，仅此而已。

所以模板方法中应该会多了一个useEffect函数：

class Component {
  
  props:Object,
  
  componentDidmount:Funciton,
  
  useEffect:Function,
  
  render:Function

}

那么，从useEffect的写法来看，他是一个高级函数，接受函数作为参数，并且第二个参数是个数组。

接受函数作为参数，我们可以断定它是一个高级函数。

那么第二个参数数组呢? 我们可以推测出什么呢？

我们可以思考一下，在js中哪些情况下才会用数组作为参数呢？对了，apply方法，apply方法的第二参参数就是数组或类数组对象。

所以我们可以推测，useEffect内部应该是调用了apply,将第一个函数作为谁的方法执行了。

有了这么一个思考的过程，当我们真正的空闲下来，去读源码的时候，就会很容易的理解源码中的代码。

封面图中的slogen是很自然的出现到脑海中的，完整的句子是：

书山有路勤为径，学海无涯苦作舟。

但我只各取前一部分：书山有路，学海无涯。

于书山中寻路，于学海中求进取。

望诸公共勉之。