React Hooks 深刻系列

時間 2019-11-06

標籤 react hooks 深刻系列欄目 React 简体版

原文原文鏈接

本文基於近段時間對 hooks 碎片化的理解做一次簡單梳理, 我的博客。同時歡迎關注基於 hooks 構建的 UI 組件庫 —— snake-design。react

在 class 已經融入 React 生態的節點下, React 推出的 Hooks 具備以下優點:git

更簡潔的書寫;
相對類中的 HOC 與 render Props, Hooks 擁有更加自由地組合抽象的能力;

使用 Hooks 的注意項

在 hooks 中每一次 render 都有本身的 state 和 props, 這與 class 中存在差別, 見 Hooks 每次渲染都是閉包github
- class 中能夠用閉包模擬 hooks 的表現, 連接, hooks 中可使用 ref 模擬 class 的表現, 連接;
寫出 useEffect 的所用到的依賴redux

在如下 demo 中, useEffect 的第二個參數傳入 [], 但願的是 useEffect 裏的函數只執行一次(相似在 componentDidMount 中執行一次, 可是注意這裏僅僅是相似, 詳細緣由見上一條注意項), 頁面上每隔 1s 遞增 1。數組

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

  useEffect(() => {
    const id = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    return () => {
      clearInterval(id);
    };
  }, []);

  return count;
}
複製代碼

但這樣達到咱們預期的效果了麼? demo, 能夠看到界面上只增長到 1 就中止了。緣由就是傳入的第二個參數 [] 搞的鬼, [] 表示沒有外界狀態對 effect 產生干擾。流程大體以下:緩存

第一次調用 useEffect 傳入的 count 爲 0, 因而 setCount(0 + 1);
受 useEffect 第二個參數 [] 的影響，count 仍然爲 0, 因此至關於仍是 setCount(0 + 1);

那如何修正上述問題呢? 方法有兩個(方法一爲主, 方法二爲輔):閉包

方法一: 將 [] 改成 [count]
方法二: 將 setCount(count + 1) 改成 setCount(count => count + 1)。這種方法的思想是修正狀態的值而不依賴外面傳進的狀態。

不過遇到 setCount(count => count + 1) 的狀況就能夠考慮使用 useReducer 了。ide

什麼時候使用 useReducer

使用 useState 的地方都能用 useReducer 進行替代。相較 useState, useReducer 有以下優點:函數

useReducer 將 how(reducer) 和 what(dispatch(action)) 進行抽離; 使用 reducer 邏輯狀態進行集中化維護;
相比 useState, useReducer 沒有閉包問題;
當狀態的一個 state 依賴狀態中的另外一個 state 時, 這種狀況最好使用 useReducer; 能夠參考 decoupling-updates-from-actions 中 Dan 列舉的 demo。

處理 useEffect 中的公用函數

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

  function getFetchUrl(query) {
    return `http://demo${query}`
  }

  useEffect(() => {
    const url = getFetchUrl('react')
  }, [getFetchUrl]);

  useEffect(() => {
    const url = getFetchUrl('redux')
  }, [getFetchUrl]);

  return count;
}
複製代碼

此時 useEffect 中傳入的第二個參數 getFetchUrl 至關於每次都是新的, 因此每次都會請求數據, 那除了 [getFetchUrl] 將改成 [] 這種不推薦的寫法外，有兩種解決方法:oop

*. 方法一: 提高 getFetchUrl 的做用域; *. 方法二: 使用 useCallback 或者 useMemo 來包裹 getFetchUrl;

React.memo 修飾一個函數組件, useMemo 修飾一個函數。它們本質都是運用緩存。

React Hooks 內部是怎麼工做的

爲了理解 React Hooks 內部實現原理, 對 useState、useEffect 進行了簡單的實現。

useState 的簡單實現

使用閉包來實現 useState 的簡單邏輯:

// 這裏使用閉包
const React = (function() {
  let _val

  return {
    useState(initialValue) {
      _val = _val || initialValue

      function setVal(value) {
        _val = value
      }

      return [_val, setVal]
    }
  }
})()
複製代碼

測試以下:

function Counter() {
  const [count, setCount] = React.useState(0)

  return {
    render: () => console.log(count),
    click: () => setCount(count + 1)
  }
}

Counter().render() // 0
Counter().click()  // 模擬點擊
Counter().render() // 1
複製代碼

useEffect 的簡單實現

var React = (function() {
  let _val, _deps

  return {
    useState(initialValue) {
      _val = _val || initialValue

      function setVal(value) {
        _val = value
      }

      return [_val, setVal]
    },
    useEffect(callback, deps) {
      const ifUpdate = !deps

      // 判斷 Deps 中的依賴是否改變
      const ifDepsChange = _deps ? !_deps.every((r, index) => r === deps[index]) : true

      if (ifUpdate || ifDepsChange) {
        callback()

        _deps = deps || []
      }
    }
  }
})()
複製代碼

測試代碼以下:

var {useState, useEffect} = React

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

  useEffect(() => {
    console.log('useEffect', count)
  }, [count])

  return {
    render: () => console.log('render', count),
    click: () => setCount(count + 1),
    noop: () => setCount(count), // 保持不變, 觀察 useEffect 是否被調用
  }
}

Counter().render() // 'useEffect' 0, 'render', 0
Counter().noop()
Counter().render() // 'render', 0
Counter().click()
Counter().render() // 'useEffect' 1, 'render', 1
複製代碼

處理屢次調用的情形

爲了在 hooks 中能使用屢次 useState, useEffect, 將各個 useState, useEffect 的調用存進一個數組中, 在上面基礎上進行以下改造:

const React = (function() {
  const hooks = []
  let currentHook = 0

  return {
    render(Component) {
      const component = Component()
      component.render()
      currentHook = 0 // 重置, 這裏很關鍵, 將 hooks 的執行放到 hooks 隊列中, 確保每次執行的順序保持一致。
      return component
    },
    useState(initialValue) {
      hooks[currentHook] = hooks[currentHook] || initialValue

      function setVal(value) {
        hooks[currentHook] = value
      }

      return [hooks[currentHook++], setVal]
    },
    useEffect(callback, deps) {
      const ifUpdate = !deps

      // 判斷 Deps 中的依賴是否改變
      const ifDepsChange = hooks[currentHook] ? !hooks[currentHook].every((r, index) => r === deps[index]) : true

      if (ifUpdate || ifDepsChange) {
        callback()

        hooks[currentHook++] = deps || []
      }
    }
  }
})()
複製代碼