认识 React Hooks 之二

今天是延续昨天的 Hooks 探索，要学习的是 useReducer 、useCallback、useMemo 与 useRef 。

就让我们来看看这些 Hooks 可以带给我们怎麽样更简便的使用方式吧!

useReducer

在前面的天数我们学习到了 Redux 的使用，如果能够理解的话，相信 useReducer 使用起来就不会那麽陌生。

因为 useReducer 会回传一个 state 与 dipatch 的方法，然後就跟 Redux 一样透过 dispatch 一个 action 来更新 state 中的状态。

这里我们来看看官方提供的范例程序码:

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

上方的程序码是一个简单的加减计数器，可以执行加一、减一的操作。

而基本上设定 state， dipatch 一个 action 到 reducer 更新 state 的状态，根本和使用 Redux 没什麽差异。

不过有一个小细节需要注意的部分是， initialState 原本在 Redux 中会作为 reducer 的预设值，而使用 useReducer 的话，则是将 initialState 当作第二个参数传入。

useCallback

useCallback 会回传传入的 callback function 的 memoized 版本，让这个 callback 只会在依赖改变时才会更新。

而这麽做的原因在於要避免不必要的 render，优化效能。

这里来看看官方提供的一个示意程序码:

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

callback function 传入一个 doSomething 方法，而这个方法会在当 a, b 发生改变时才会执行。

useMemo

useMemo 使用方式与 useCallback 类似，都是为了优化效能，但是其 memoized 的是一个值，而且需要注意的是 useMemo 的 function 是在 render 期间执行，所以避免在 render 期间处理 side effect。

useRef

今天的最後要学习的是 useRef，如果还记得第十四天的createRef 学起来，focus 元素不麻烦，那这个部分也不会太难理解，因为 useRef 可以让我们在 function component 中更简单的 focus 元素。

直接来看看底下这个例子:

相关测试范例，点击前往。

import React, { useRef } from "react";
import "./styles.css";

export default function App() {
  const myRef = useRef(null);

  const focusInputByUseRef = () => {
    myRef.current.focus();
  };

  return (
    <div className="App">
      <h2 onClick={focusInputByUseRef}>
        functional Componet: useRef - 点击本段文字
      </h2>
      <input ref={myRef} />
    </div>
  );
}

在 useRef 中传初始值传入 null 是告诉 React 目前在一开始时还没有任何 ref 依附在 React element 中，而之後当我们在元素中设定 ref 时，此时就会拿到这个元素了。

今天学习了 React Hooks 中的 useReducer、useCallback、useMemo 以及 useRef 的基础概念。

明天再继续探索其他的 Hooks吧！

铁人赛文章与程序码同步发布於:

1. 个人部落格
2. Github

资源

• useReducer
• useCallback
• useMemo
• useRef