了解React hooks常用方法useState, useEffect, useMemo, useCallback, useContext

所在項目一直使用ReactNative的 0.58, 積累了大量的業務代碼, 

是以一直沒有使用React和ReactNative推出的hooks方法編寫.

現在自己學習了解一下.

useState

  針對每個state的值設定一組value/setValue.

  值不變的set不會重複觸發render.

const [count, setCount] = useState(0);
  <p>You clicked {count} times</p>                 // 擷取count值
  <button onClick={() => setCount(count + 1)}>     // 通過setCount設定
    Click Me
  </button>
           

useEffect

  > 生命周期回調: 

    傳回值: 可傳回一個函數用于消除副作用.

    以生命周期來解釋Effect:

      1. Mount: 運作第一次 effect

      2. Update: 清除上一個 effect, 運作下一個 effect   (update可發生多次)

      3. Unmount: 清除最後一個 effect

  > 第二個參數可填一個數組, 也可以不填.

    表示某幾個state中有一個變化, 就觸發update的Effect調用.

useEffect(() => {
      if (!oldTitle) oldTitle = document.title;            // 記下原标題
      document.title = `You clicked ${count} times`;       // 副作用, 更改标題
      return function cleanup() {
        document.title = oldTitle;                         // 消除副作用, 還原标題    
      };
    }, [count]);                                           // count變化才觸發, 可不填
           

useContext

  context可以用于跨越多層傳遞參數, 

  在多層情況下, 相比props一層一層的傳遞更有效.

const themes = {                                                          // 建立兩組主題樣式
    light: { color: "#000000", background: "#eeeeee" },
    dark: { color: "#ffffff", background: "#222222" }
  };
  const ThemeContext = React.createContext(themes.light);                   // 建立Context的類型
  <ThemeContext.Provider value={count % 2 ? themes.dark : themes.light}>    // 建Context節點
    <ThemedButton />
  </ThemeContext.Provider>
  function ThemedButton() {
    const theme = useContext(ThemeContext);
    return <button style={theme}>styled by context!</button>;
  }
           

useReducer

  替換useState, 類似redux的用法和功能.

const initialState = {count: 0};                                  // state初始值
  function reducer(state, action) {                                 // reducer處理dispatch
    switch (action.type) {
      case 'increment': return {count: state.count + 1};            // 生成新的state
      default: throw new Error();
    }
  }
  const [state, dispatch] = useReducer(reducer, initialState);      // userReducer傳回state,dispatch
  state.count                                                       // 使用state中的value
  <button onClick={() => dispatch({type: 'decrement'})}>-</button>  // 使用dispatch
           

useRef

通路節點的ref對象

function TextInputWithFocusButton() {
    const inputEl = useRef(null);                          // 建立初始null的ref
    return <>
      <input ref={inputEl} type="text" />                  // 擷取ref
      <button onClick={() => {
        inputEl.current.focus();                           // 使用ref對象的函數
      }}>Focus</button>
    </>
  }
           

userCallback

資料變化才更新, 比對第二個參數

const renderButton = useCallback(
    () => <Button > {xxx} </Button>,
    [xxx]
  );
           

useMemo

資料變化才做調用, 避免不必要的執行大量計算, 比對第二個參數

  const result = useMemo(
  () => {
    ...         // 大量計算
  }, [xxx]);
           

參考連結

https://react.docschina.org/docs/hooks-reference.html