从React函数式组件说到Hooks

共计 4244 个字符，预计需要花费 11 分钟才能阅读完成。

历史
React 在 2013 年开源，在 2015 引入函数式组件，不过在日常开发中经常被忽略。
ReactJS Core Team 确实大部分成员都曾在推特上公开夸赞过对函数式编程与 ML 系语言（或其特性）的优点：Sebastian 日常提到 OCaml，Sophie 至少提过 Rust/Kotlin/Swift 并且嫌弃过 Dart 没有 ADT 和 non-nullability，Dan 和 Andrew 的 Redux 主要受 Elm 影响，Dan 曾提过学习高阶函数后省去了一半设计模式，Andrew 的 Recompose 主要利用了函数的组合性，其他成员未知。

为什么引入 class 组件：

Chenglou: God forbid React api led newcomers into something familiar instead of FP purists’agendas lol。
难道还不允许 React API 设计得对新人更友好了？
Cristiano: So I guess also making React in JS in the first place was the ultimate trolling.
我们先把 React 做成 JS 就是找骂啊……
Jordan: They’re onto us.
这怎么怪到我们头上了……

事实是，即使在 FB 内部，也显然不是所有程序员都熟悉函数式编程的概念。做一个前端框架是拿来用的，如果有大家熟悉的概念可以对照，为什么刻意要去用大家不熟悉的概念呢？对于迁移至 ES6 Class，主要的目的是为了减少 React 特有的 API，毕竟并不因为它「接受一个函数」就比 ES6 class 更函数式了……

在之前 class 组件通常被认为有更多的功能，例如可以拥有 state，可以调用生命周期，而现在在 hooks 引入之后这个说法就不成立了。以前 Function 组件没有 state，所以也叫 SFC（stateless functional component），现在更新叫做 FC（functional component）。或许你也听说过，这两类组件中，有一类的性能更好。哪一类呢？很多这方面的性能测试，都是有缺陷的，因此要从这些测试中得出结论，不得不谨慎一点。性能主要取决于你代码要实现的功能(以及你的具体实现逻辑)，和使用函数组件还是类组件，没什么关系。我们观察发现，尽管函数组件和类组件的性能优化策略有些不同，但是他们性能上的差异是很微小的。

先看下面两个组件：
函数式组件在父组件中执行的函数的方法：

function Greeting() {return <p>Hello</p>;}

// Inside React
const result = Greeting(props); // <p>Hello</p>

类组件在父组件中先实例化一个对象，然后执行这个对象上的 render 方法：

class Greeting extends React.Component {render() {return <p>Hello</p>;}
}

// Inside React
const instance = new Greeting(props); // Greeting {}
const result = instance.render(); // <p>Hello</p>

再来看两段代码
一个两秒后执行 alter 的按钮的函数式组件

function ProfilePage(props) {const showMessage = () => {alert('我是' + props.user);
    };
  
    const handleClick = () => {setTimeout(showMessage, 2000);
    };
    
    return (<button onClick={handleClick}>Function</button>
    );
  }

一个两秒后执行 alter 的按钮的函数式组件

class ProfilePage extends React.Component {showMessage = () => {alert('我是' + this.props.user);
    };
  
    handleClick = () => {setTimeout(this.showMessage, 2000);
    };
    
  
    render() {return <button onClick={this.handleClick}>Class</button>;
    }
  }

一般我们会认为上面两个组件是完全等价的。开发者经常像上面这样，在函数组件和类组件之间重构代码，却没有意识到他们隐含的差异。然而这两个是有一些差别，你有看出这两个的区别吗？
我们用一个组件将上面两个组件包裹

function App() {const [user, setUser] = useState('小码王')
  return (
    <div className="App">
      <p>{user}</p>
      <button onClick={() => setUser('小码世界')}>changeName</button>
      <br/>  
      <ClassButton user={user}/>
      <FunctionButton user={user}/>
    </div>
  );
}

当我们先点击 Class 按钮然后再点击 changName 按钮，alert 出的我是小码世界，而我们先点击 Function 再点击 changName，alter 出的我是小码王。
为什么会这样呢？
我们可以看到在函数式组件中 user 是在 props 中读取的，而在类组件中 user 是从 this.props 中读取的，区别就在 this 上，在 react 中 props 是不可变，而 this 是可变的，所以当父组件的值改变时 this 也改变了。
有什么方法使类组件也实现函数式组件的效果呢？

class ProfilePage extends React.Component {render() {
    // Capture the props!
    const props = this.props;

    const showMessage = () => {alert('我是' + props.user);
    };

    const handleClick = () => {setTimeout(showMessage, 2000);
    };

    return <button onClick={handleClick}>Class</button>;
  }
}

在 render 函数中创造了一个 props 的闭包，这个问题就解决了，是不是感觉段代码比较熟悉，其实在 render 函数里面的代码抽离出来就是函数式的组件了。所以当函数式组件有 render 方法以外的功能，就可以实现类组件的任何功能了，这就是 hooks 了。

在 Hooks 的协议设计考量上，与原本的 React HoC Design 其实会有很多的不同，主要原因也许就在于 HoC 总的来说是 Props 导向的设计，而 Hooks 则是更 functional 风格的调用形态。并且，HoC 可能会倾向于避免产生过多的 HoC 层级，而产生过深的 VDOM Tree。Hooks 大可以更自由地讲更多的 use 方法分离式的调用，也能够得到更大的自由度；

代码重用：在 hooks 出来之前，常见的代码重用方式是 HOCs 和 render props，这两种方式带来的问题是：你需要解构自己的组件，同时会带来很深的组件嵌套
复杂的组件逻辑：在 class 组件中，有许多的 lifecycle 函数，你需要在各个函数的里面去做对应的事情。这种方式带来的痛点是：逻辑分散在各处，开发者去维护这些代码会分散自己的精力，理解代码逻辑也很吃力
class 组件的困惑：对于初学者来说，需要理解 class 组件里面的 this 是比较吃力的(这个理由有点勉强~)，同时，基于 class 的组件难以优化(举个不恰当的例子，看一下 babel 转移出来的 class 代码量增长了多少)

从 react team 公布 hooks 的概念时，淘宝内部做了一些简单的研究与调研，结论是 hooks 是类 react 体系的未来主流编程模式，无论是基于 hooks 后业务代码会更简练还是复用更容易，这些都是降低了 react 编程的门槛。
尤雨溪也称 vue3.0 的特性吸取了很多 hooks 的灵感，并在最新的 RFC(意见征求稿)中发布了 Function API + Hooks。

React Hook 让无狀态组件拥有了许多只有有狀态组件的能力，如自更新能力（setState，使用 useState），访问 ref（使用 useRef 或 useImperativeMethods），访问 context(使用 useContext)，使用更高级的 setState 设置（useReducer），及进行类似生命周期的阶段性方法（useEffect 或 useLayoutEffect）。

function useReducer(reducer, initialArg,init){     
  var initialState = void 0;      
  if (init !== undefined) {initialState = init(initialArg);
  } else {initialState = initialArg;}
  function dispatch(action){memoizedState = reducer(memoizedState,action);          
    render();}      
  memoizedState =  memoizedState||initialState;      
  return  [memoizedState, dispatch]; 
}

function useState(initialState){return  useReducer((oldState, newState)=>newState, initialState); 
}

useRef() ===  useState({current: initialValue})[0]

useCallback 和 useMemo 的参数跟 useEffect 一致，他们之间最大的区别有是 useEffect 会用于处理副作用，而前两个 hooks 不能。

 useMemo 和 useCallback 都会在组件第一次渲染的时候执行，之后会在其依赖的变量发生改变时再次执行；并且这两个 hooks 都返回缓存的值，useMemo 返回缓存的变量，useCallback 返回缓存的函数。

1. 前言介绍

2. 函数式组件和类组件的区别

构建时的差别

运行时的差别

3. Hooks

Hooks 解决的问题

Hooks 的 API

hooks 之间的关系

useState useReducer useRef 关系

useEffect useLayoutEffect 的关系

useMemo useCallback 的关系

Just My Socks（注册教程内含优惠码）