从React函数式组件说到Hooks

1.前言介绍

历史
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 更函数式了……

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

在之前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了。

3. Hooks

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

Hooks解决的问题

• 代码重用：在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 。

Hooks的API

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

hooks之间的关系

useState useReducer useRef关系

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]

useEffect useLayoutEffect的关系

useMemo useCallback的关系

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

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