406 - 《React Hooks CheatSheet》

State

1、useState()，声明一个状态变量。

const [age, setAge] = useState(42);

2、useReducer()，声明一个状态变量，使用 reducer 函数更新状态。

const [state, dispatch] = useReducer(reducer, { age: 42 });

Context

1、useContext()，读取和订阅 context。

const theme = useContext(ThemeContext);

Effect

1、useEffect()，同步外部系统。

useEffect(() => {
  const unsubscribe = socket.connect(props.userId);
  return () => {
    unsubscribe();
  };
}, [props.userId]);

2、useLayoutEffect()，类 useEffect 但在浏览器重绘之前触发。

useLayoutEffect(() => {
  // 读取 DOM 布局
}, []);

3、useInsertionEffect()，CSS-in-JS 库用来注入样式。

useInsertionEffect(() => {
  // 注入样式
}, []);

Performance

1、useCallback()，缓存函数。

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

2、useMemo()，缓存值。

const value = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);

3、useTransition()，不阻塞用户交互的状态更新。

const [isP