React Hook 简记

下列所写，部分要照伪代码来理解

State Hook

const [state, setState] = useState(initialState);
const [state, setState] = useState(() => initialState);

setState(state);
setState(prevState => state);

By Reducer

const reducer = (prevstate, action) => newState

const [state, dispatch] = useReducer(reducer, initState);
const [state, dispatch] = useReducer(reducer, initArg, initFn);
//上述两种， initState 对应 initFn(initArg)

dispatch(action)


// or Redux Style
const reducer = (prevstate = initState, action) => newState
const [state, dispatch] = useReducer(reducer, undefined, reducer);

Effect Hook

useEffect(
  effectFn,		// 返回值 作为 cleanup函数
  depsArray 	// 省略 意为 依赖全体
)

同步版本：useLayoutEffect

Context Hook

1	const value = useContext(MyContext);

Memo Hook 和 Callback Hook

这一部分的hook其实是为了优化性能。但是：

大多数时候，你不需要考虑去优化不必要的重新渲染。

函数签名

function useCallback<T>(
  callback: T,
  inputs: Array<mixed> | void | null,
): T

function useMemo<T>(
  nextCreate: () => T,
  inputs: Array<mixed> | void | null,
): T

React 文档的解释

useMemo

避免在每次渲染时都进行高开销的计算

useCallback

使用引用相等性去避免非必要渲染

另外，React 文档里有说到

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。

个人理解

因为 useMemo 主要是为了避免多次进行高开销的计算。因为每次创建的只是一个可以计算结果的函数，并没有实际进行计算（当然，除了第一次以及依赖改变的时候）。

而 useCallback 主要是为了前后返回值（主要是回调函数）的引用相等性。因为基于引用相等性（特别是对于对象来说），可以让其他依赖于此的组件可以去避免非必要渲染。

虽然用 useMemo 也可以实现 useCallback，但是没有必要，因为目的不同。并且 useMemo 并不保证引用相等性。

Ref Hook

1
2
3

const refContainer = useRef(initialValue);

refContainer.current

ImperativeHandle Hook 和 forwardRef

1 2	useImperativeHandle(ref, createHandle, [deps]) forwardRef: 向子组件转发ref

const FancyInput = forwardRef((props, ref)=>{
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
});

相当于此时，ref就只能用focus了，或者只有focus有响应。

DebugValue Hook

useDebugValue 可用于在 React 开发者工具中显示自定义 hook 的标签。

1 2	useDebugValue(value) useDebugValue(value, value => fn(value)) // fn 通常是 value -> string