深入淺出 React Hooks

直播回放鏈接：雲棲社區

React Hooks 是什麼？

Hooks 顧名思義，字面意義上來說就是 React 鉤子的概念。通過一個 case 我們對 React Hooks 先有一個第一印象。

假設現在要實現一個計數器的組件。如果使用組件化的方式，我們需要做的事情相對更多一些，比如說聲明 state，編寫計數器的方法等，而且需要理解的概念可能更多一些，比如 Javascript 的類的概念，this 上下文的指向等。

示例

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Counter extends React.Component {
  state = {
      count: 0
  }

  countUp = () => {
    const { count } = this.state;
      this.setState({ count: count + 1 });
  }
  
  countDown = () => {
    const { count } = this.state;
      this.setState({ count: count - 1 });
  }
  
  render() {
    const { count } = this.state;
      return (
      <div>
        <button onClick={this.countUp}>+</button>
        <h1>{count}</h1>
        <button onClick={this.countDown}>-</button>
      </div>
    )
  }
}

ReactDOM.render(<Counter />, document.getElementById('root'));

使用 React Hooks，我們可以這麼寫。

示例

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+</button>
      <h1>{count}</h1>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  )
}

ReactDOM.render(<Counter />, document.getElementById('root'));

通過上面的例子，顯而易見的是 React Hooks 提供了一種簡潔的、函數式（FP）的程序風格，通過純函數組件和可控的數據流來實現狀態到 UI 的交互（MVVM）。

Hooks API

• Basic Hooks

  • useState
  • useEffect
  • useContext

• Additional Hooks

  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useImperativeHandle
  • useLayoutEffect
  • useDebugValue

useState

useState 是最基本的 API，它傳入一個初始值，每次函數執行都能拿到新值。

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+</button>
      <h1>{count}</h1>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  )
}

ReactDOM.render(<Counter />, document.getElementById('root'));

需要注意的是，通過 useState 得到的狀態 count，在 Counter 組件中的表現爲一個常量，每一次通過 setCount 進行修改後，又重新通過 useState 獲取到一個新的常量。

useReducer

useReducer 和 useState 幾乎是一樣的，需要外置外置 reducer (全局)，通過這種方式可以對多個狀態同時進行控制。仔細端詳起來，其實跟 redux 中的數據流的概念非常接近。

import { useState, useReducer } from 'react';
import ReactDOM from 'react-dom';

function reducer(state, action) {
  switch (action.type) {
    case 'up':
      return { count: state.count + 1 };
    case 'down':
      return { count: state.count - 1 };
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 1 })
  return (
    <div>
      {state.count}
      <button onClick={() => dispatch({ type: 'up' })}>+</button>
      <button onClick={() => dispatch({ type: 'down' })}>+</button>
    </div>
  );
}

ReactDOM.render(<Counter />, document.getElementById('root'));

useEffect

一個至關重要的 Hooks API，顧名思義，useEffect 是用於處理各種狀態變化造成的副作用，也就是說只有在特定的時刻，纔會執行的邏輯。

import { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

function Example() {
  const [count, setCount] = useState(0);

  // => componentDidMount/componentDidUpdate
  useEffect(() => {
    // update 
    document.title = `You clicked ${count} times`;
    // => componentWillUnMount
    return function cleanup() {
        document.title = 'app';
    }
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

ReactDOM.render(<Example />, document.getElementById('root'));

useMemo

useMemo 主要用於渲染過程優化，兩個參數依次是計算函數（通常是組件函數）和依賴狀態列表，當依賴的狀態發生改變時，纔會觸發計算函數的執行。如果沒有指定依賴，則每一次渲染過程都會執行該計算函數。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

import { useState, useMemo } from 'react';
import ReactDOM from 'react-dom';

function Time() {
    return <p>{Date.now()}</p>;
}

function Counter() {
  const [count, setCount] = useState(0);
  
  const memoizedChildComponent = useMemo((count) => {
    return <Time />;
  }, [count]);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
      <div>{memoizedChildComponent}</div>
    </div>
  );
}

ReactDOM.render(<Counter />, document.getElementById('root'));

useContext

context 是在外部 create ，內部 use 的 state，它和全局變量的區別在於，如果多個組件同時 useContext，那麼這些組件都會 rerender，如果多個組件同時 useState 同一個全局變量，則只有觸發 setState 的當前組件 rerender。

示例-未使用 useContext

import { useState, useContext, createContext } from 'react';
import ReactDOM from 'react-dom';

// 1. 使用 createContext 創建上下文
const UserContext = new createContext();

// 2. 創建 Provider
const UserProvider = props => {
  let [username, handleChangeUsername] = useState('');
  return (
    <UserContext.Provider value={{ username, handleChangeUsername }}>
      {props.children}
    </UserContext.Provider>
  );
};

// 3. 創建 Consumer
const UserConsumer = UserContext.Consumer;

// 4. 使用 Consumer 包裹組件
const Pannel = () => (
  <UserConsumer>
    {({ username, handleChangeUsername }) => (
      <div>
        <div>user: {username}</div>
        <input onChange={e => handleChangeUsername(e.target.value)} />
      </div>
    )}
  </UserConsumer>
);

const Form = () => <Pannel />;

const App = () => (
  <div>
    <UserProvider>
      <Form />
    </UserProvider>
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

示例 - 使用 useContext

import { useState, useContext, createContext } from 'react';
import ReactDOM from 'react-dom';

// 1. 使用 createContext 創建上下文
const UserContext = new createContext();

// 2. 創建 Provider
const UserProvider = props => {
  let [username, handleChangeUsername] = useState('');
  return (
    <UserContext.Provider value={{ username, handleChangeUsername }}>
      {props.children}
    </UserContext.Provider>
  );
};

const Pannel = () => {
  const { username, handleChangeUsername } = useContext(UserContext); // 3. 使用 Context
  return (
    <div>
      <div>user: {username}</div>
      <input onChange={e => handleChangeUsername(e.target.value)} />
    </div>
  );
};

const Form = () => <Pannel />;

const App = () => (
  <div>
    <UserProvider>
      <Form />
    </UserProvider>
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

useRef

useRef 返回一個可變的 ref 對象，其 .current 屬性初始化爲傳遞的參數（initialValue）。返回的對象將持續整個組件的生命週期。事實上 useRef 是一個非常有用的 API，許多情況下，我們需要保存一些改變的東西，它會派上大用場的。

示例

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

React 狀態共享方案

說到狀態共享，最簡單和直接的方式就是通過 props 逐級進行狀態的傳遞，這種方式耦合於組件的父子關係，一旦組件嵌套結構發生變化，就需要重新編寫代碼，維護成本非常昂貴。隨着時間的推移，官方推出了各種方案來解決狀態共享和代碼複用的問題。

Mixins

React 中，只有通過 createClass 創建的組件才能使用 mixins。這種高耦合，依賴難以控制，複雜度高的方式隨着 ES6 的浪潮逐漸淡出了歷史舞臺。

HOC

高階組件源於函數式編程，由於 React 中的組件也可以視爲函數（類），因此天生就可以通過 HOC 的方式來實現代碼複用。可以通過屬性代理和反向繼承來實現，HOC 可以很方便的操控渲染的結果，也可以對組件的 props / state 進行操作，從而可以很方便的進行復雜的代碼邏輯複用。

import React from 'react';
import PropTypes from 'prop-types';

// 屬性代理
class Show extends React.Component {
  static propTypes = {
    children: PropTypes.element,
    visible: PropTypes.bool,
  };

  render() {
    const { visible, children } = this.props;
    return visible ? children : null;
  }
}

// 反向繼承
function Show2(WrappedComponent) {
  return class extends WrappedComponent {
    render() {
      if (this.props.visible === false) {
        return null;
      } else {
        return super.render();
      }
    }
  }
}

function App() {
    return (
      <Show visible={Math.random() > 0.5}>hello</Show>
  );
}

Redux 中的狀態複用是一種典型的 HOC 的實現，我們可以通過 compose 來將數據組裝到目標組件中，當然你也可以通過裝飾器的方式進行處理。

import React from 'react';
import { connect } from 'react-redux';

// use decorator
@connect(state => ({ name: state.user.name }))
class App extends React.Component{
  render() {
        return <div>hello, {this.props.name}</div>
  }
}

// use compose
connect((state) => ({ name: state.user.name }))(App);

 

Render Props

顯而易見，renderProps 就是一種將 render 方法作爲 props 傳遞到子組件的方案，相比 HOC 的方案，renderProps 可以保護原有的組件層次結構。

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';

// 與 HOC 不同，我們可以使用具有 render prop 的普通組件來共享代碼
class Mouse extends React.Component {
  static propTypes = {
    render: PropTypes.func.isRequired
  }

  state = { x: 0, y: 0 };

  handleMouseMove = (event) => {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

function App() {
  return (
    <div style={{ height: '100%' }}>
      <Mouse render={({ x, y }) => (
          // render prop 給了我們所需要的 state 來渲染我們想要的
          <h1>The mouse position is ({x}, {y})</h1>
        )}/>
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));

Hooks

通過組合 Hooks API 和 React 內置的 Context，從前面的示例可以看到通過 Hook 讓組件之間的狀態共享更清晰和簡單。

React Hooks 設計理念

基本原理

function FunctionalComponent () {
  const [state1, setState1] = useState(1);
  const [state2, setState2] = useState(2);
  const [state3, setState3] = useState(3);
}

{
  memoizedState: 'foo',
  next: {
    memoizedState: 'bar',
    next: {
      memoizedState: 'bar',
      next: null
    }
  }
}

函數式貫徹到底

capture props

函數組件天生就是支持 props 的，基本用法上和 class 組件沒有太大的差別。需要注意的兩個區別是：

• class 組件 props 掛載在 this 上下文中，而函數式組件通過形參傳入；
• 由於掛載位置的差異，class 組件中如果 this 發生了變化，那麼 this.props 也會隨之改變；而在函數組件裏 props 始終是不可變的，因此遵守 capture value 原則（即獲取的值始終是某一時刻的），Hooks 也遵循這個原則。

通過一個示例來理解一下 capture value，我們可以通過 useRef 來規避 capture value，因爲 useRef 是可變的。

state

	class 組件	函數組件
創建狀態	this.state = {}	useState, useReducer
修改狀態	this.setState()	set function
更新機制	異步更新，多次修改合併到上一個狀態，產生一個副本	同步更新，直接修改爲目標狀態
狀態管理	一個 state 集中式管理多個狀態	多個 state，可以通過 useReducer 進行狀態合併（手動）
性能	高	如果 useState 初始化狀態需要通過非常複雜的計算得到，請使用函數的聲明方式，否則每次渲染都會重複執行

生命週期

• componentDidMount / componentDidUpdate / componentWillUnMount

useEffect 在每一次渲染都會被調用，稍微包裝一下就可以作爲這些生命週期使用；

• shouldComponentUpdate

通常我們優化組件性能時，會優先採用純組件的方式來減少單個組件的渲染次數。

class Button extends React.PureComponent {}

React Hooks 中可以採用 useMemo 代替，可以實現僅在某些數據變化時重新渲染組件，等同於自帶了 shallowEqual 的 shouldComponentUpdate。

強制渲染 forceUpdate

由於默認情況下，每一次修改狀態都會造成重新渲染，可以通過一個不使用的 set 函數來當成 forceUpdate。

const forceUpdate = () => useState(0)[1];

實現原理

基於 Hooks，增強 Hooks

來一套組合拳吧！

由於每一個 Hooks API 都是純函數的概念，使用時更關注輸入 (input) 和輸出 (output)，因此可以更好的通過組裝函數的方式，對不同特性的基礎 Hooks API 進行組合，創造擁有新特性的 Hooks。

• useState 維護組件狀態
• useEffect 處理副作用
• useContext 監聽 provider 更新變化

useDidMount

import { useEffect } from 'react';

const useDidMount = fn => useEffect(() => fn && fn(), []);

export default useDidMount;

useDidUpdate

import { useEffect, useRef } from 'react';

const useDidUpdate = (fn, conditions) => {
  const didMoutRef = useRef(false);
  useEffect(() => {
    if (!didMoutRef.current) {
      didMoutRef.current = true;
      return;
    }
    // Cleanup effects when fn returns a function
    return fn && fn();
  }, conditions);
};

export default useDidUpdate

useWillUnmount

在講到 useEffect 時已經提及過，其允許返回一個 cleanup 函數，組件在取消掛載時將會執行該 cleanup 函數，因此 useWillUnmount 也能輕鬆實現~

import { useEffect } from 'react';

const useWillUnmount = fn => useEffect(() => () => fn && fn(), []);

export default useWillUnmount;

useHover

示例

// lib/onHover.js
import { useState } from 'react';

const useHover = () => {
  const [hovered, set] = useState(false);
  return {
    hovered,
    bind: {
      onMouseEnter: () => set(true),
      onMouseLeave: () => set(false),
    },
  };
};

export default useHover;

import { useHover } from './lib/onHover.js';

function Hover() {
  const { hovered, bind } = useHover();
  return (
    <div>
      <div {...bind}>
        hovered:
        {String(hovered)}
      </div>
    </div>
  );
}

useField

示例

// lib/useField.js

import { useState } from 'react';

const useField = (initial) => {
  const [value, set] = useState(initial);

  return {
    value,
    set,
    reset: () => set(initial),
    bind: {
      value,
      onChange: e => set(e.target.value),
    },
  };
}

export default useField;

import { useField } from 'lib/useField';

function Input {
  const { value, bind } = useField('Type Here...');

  return (
    <div>
      input text:
      {value}
      <input type="text" {...bind} />
    </div>
  );
}

function Select() {
  const { value, bind } = useField('apple')
  return (
    <div>
      selected:
      {value}
      <select {...bind}>
        <option value="apple">apple</option>
        <option value="orange">orange</option>
      </select>
    </div>
  );
}

注意事項

• Hook 的使用範圍：函數式的 React 組件中、自定義的 Hook 函數裏；
• Hook 必須寫在函數的最外層，每一次 useState 都會改變其下標 (cursor)，React 根據其順序來更新狀態；
• 儘管每一次渲染都會執行 Hook API，但是產生的狀態 (state) 始終是一個常量（作用域在函數內部）；

結語

React Hooks 提供爲狀態管理提供了新的可能性，儘管我們可能需要額外去維護一些內部的狀態，但是可以避免通過 renderProps / HOC 等複雜的方式來處理狀態管理的問題。Hooks 帶來的好處如下：

• 更細粒度的代碼複用，並且不會產生過多的副作用
• 函數式編程風格，代碼更簡潔，同時降低了使用和理解門檻
• 減少組件嵌套層數
• 組件數據流向更清晰

事實上，通過定製各種場景下的自定義 Hooks，能讓我們的應用程序更方便和簡潔，組件的層次結構也能保證完好，還有如此令人愉悅的函數式編程風格，Hooks 在 React 16.8.0 版本已經正式發佈穩定版本，現在開始用起來吧！！！

參考資料

• hooks-reference
• react-hooks-lib
• 【React深入】從Mixin到HOC再到Hook
• How Are Function Components Different from Classes?
• under-the-hood-of-reacts-hooks-system
• 閱讀源碼後，來講講React Hooks是怎麼實現的