Hook API用法解析——useState、useEffect、useLayoutEffect

一、useState

用于定义变量与修改状态

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

更新 state 变量总是替换它而不是合并它,与 class 组件中的 setState 方法不同，useState 不会自动合并更新对象。你可以用函数式的 setState 结合展开运算符来达到合并更新对象的效果。

setState(prevState => {
  // 也可以使用 Object.assign
  return {...prevState, ...updatedValues};
});

如果你的更新函数返回值与当前 state 完全相同，则随后的重渲染会被完全跳过。

useState可以传函数与this.setState一样。setState(pre=> pre+1) 起到一个同步的作用，如果是多次setState(count+1)会被合并，只会执行一次，useState传函数就会执行多次,它的内部实现是基于useReducer

二、useEffect

相当与class组件中的生命周期函数，会在挂载完成与组件更新时被调用，当返回一个函数时，相当于组件卸载时，销毁组件

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    // 清除订阅
    subscription.unsubscribe();
  };
});

useEffect 会在调用一个新的 effect 之前对前一个 effect 进行清理

通过跳过 Effect 进行性能优化，这是很常见的需求，所以它被内置到了 useEffect 的 Hook API 中。如果某些特定值在两次重渲染之间没有发生变化，你可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可，对于有清除操作的 effect 同样适用

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新

如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。
这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，
所以它永远都不需要重复执行。这并不属于特殊情况 —— 它依然遵循依赖数组的工作方式。

虽然 useEffect 会在浏览器绘制后延迟执行，但会保证在任何新的渲染前执行。React 将在组件更新前刷新上一轮渲染的 effect。
然而，并非所有 effect 都可以被延迟执行。例如，在浏览器执行下一次绘制前，用户可见的 DOM 变更就必须同步执行，这样用户才不会感觉到视觉上的不一致。（概念上类似于被动监听事件和主动监听事件的区别。）
React 为此提供了一个额外的 useLayoutEffect Hook 来处理这类 effect。它和 useEffect 的结构相同，区别只是调用时机不同。

三、useLayoutEffect

其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。

尽可能使用标准的 useEffect 以避免阻塞视觉更新。