type Pagination = {
  current: number;
  pageSize: number;
  total: number;
定义分页器的状态时，更好的做法是将上面的属性值合并为一个 pagination 对象，而不是分别定义，
// 分别定义 current, pageSize, total 等状态，不推荐 👎




    

const [current, setCurrent] = useState<number>(1);
const [pageSize, setPageSize] = useState<number>(10);
const [total, setTotal] = useState<number>(0);
// 合并为一个 pagination 状态，推荐 👍
const [pagination, setPagination] = useState<Pagination>({ current: 1, pageSize: 10, total: 0 });
这样的状态定义带来的一个弊端是，如果我们只需要更新其中的部分属性值，为了保留状态对象的其他属性，我们需要浅拷贝一次，再合并需要更新的属性值。比如下面我们需要在 pagination 的页码和页大小改变时，更新分页器状态，
// 分页器改变，只更新分页的页码或页大小
const updatePagination = (current, pageSize) => {
  setPagination({ ...pagination, current, pageSize });
如果这个复杂状态是一个嵌套对象（Nested Object），那看起来就更糟糕了，我们需要逐层拷贝，一直到待更新属性所在的层级，
const updateNestedObject = (foo) => {
  setNestedObject({
    ...firstLevel,
      ...secondLevel,
        ...lastLevel,
        foo,
实际场景中可能不会有这么深的层级，但是嵌套对象的场景是确实存在的。如果你的状态定义是一个嵌套对象，那么你很可能需要优先考虑将它拆分为多个状态，而不是一直嵌套下去，或者使用我们接下来介绍的一些方式。
useLegcyState
when we update a state variable, we replace its value. This is different from this.setState in a class, which merges the updated fields into the object
众所周知，不同于 ”class 时代“ 类组件 this.setState 的自动合并，在 hooks 中我们通过 useState 定义的状态，调用 dispatcher 更新时，React 不会帮我们自动合并，而是直接替换，
function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
为了避免每次都需要拷贝对象，我们可以考虑自己实现一个自定义 hook 辅助进行属性值的自动合并，
function useLegacyState<T>(initialState: T | (() => T)): [T, Dispatch<SetStateAction<T>>] {
  const [state, setState] = useState<T>(initialState);
   * setState 时自动进行浅拷贝
   * @param newState
  const legacySetState = (newState: T) => {
    setState({ ...state, ...newState });
  return [state, legacySetState];
这样一来，更新分页器时，只需要传入待更新的属性值就可以了，
const [pagination, setPagination] = useLegacyState<Pagination>({ current: 1, pageSize: 10, total: 0 });
const updatePagination = (current, pageSize) => {
  setPagination({ current, pageSize });
看起来还不错，我们还可以考虑对嵌套对象提供支持，拷贝时逐层地遍历嵌套对象，找到合适的位置更新属性值，感兴趣的同学可以自己尝试封装一下。对于嵌套状态的更新，其实社区很早就有其他版本的方案，比如 immer。
useImmer
Immer 是 Mobx 的作者 mweststrate 在 2018 年 2 月发布的一个支持不可变状态的库，核心原理基于 JavaScript 的 Proxy 对象，支持柯里化，状态经过 Immer 后会被代理为 draft，对 draft 的修改会生成不可变状态，
mweststrate 后面也提供了对应的 React hook 版本的实现 useImmer，经过 useImmer 包装后的 draft 是一个响应式对象，通过 draft 对象来修改状态，就可以避免手动进行深拷贝和合并操作，
import { useImmer } from "use-immer";
function App() {
  const [nestedObj, updateNestedObj] = useImmer({
    name: "Niki de Saint Phalle",
    artwork: {
      title: "Blue Nana",
      city: "Hamburg",
      image: "https://i.imgur.com/Sd1AgUOm.jpg",
  });
  const updateCity = (city) => {
    updateNestedObj((draft) => {
      draft.artwork.city = city;
    });
immer 的实现基于 Proxy 和不可变状态，结合 React 使用时多少有些别扭，有没有更简单的方式呢？
其实，我们完全可以去掉不可变状态，仅基于响应式实现来处理复杂的状态数据更新。
useReactive
我们来构想一下这个 useReactive 的 hook，它的用法和 useState 类似，但可以动态地设置值，
// 经过 useReactive 包装后的 state 是一个响应式 Proxy 对象
const state = useReactive({ count: 0 });
// 直接修改嵌套属性可以自动触发更新
state.count = 1;
实现上，我们如何将状态数据变成响应式并且与 React 结合呢？需要考虑下面的两个问题，
如何检测值的改变，即 state.count = 1 设置后，如何让真实的状态 state.count 变成 1 ？
如何刷新视图，让页面看到效果 ？
observer
针对第 1 点，前面我们介绍了可以使用 Proxy 来包装我们的状态对象，实现上，我们考虑用一个 observer 函数来将状态对象变成响应式对象，需要注意如果状态对象是深层嵌套的，需要对每一层都进行代理，
type Callback = (...args: any[]) => void;
function observer<T extends Record<string, any>>(initialState: T, callback: Callback): T {
  const proxy = new Proxy<T>(initialState, {
    get(target, key




    
, receiver) {
      const res = Reflect.get(target, key, receiver);
      return typeof res === "object" ? observer(res, callback) : res;
    set(target, key, value) {
      const res: boolean = Reflect.set(target, key, value);
      callback();
      return res;
  });
  return proxy;
observer 接受一个初始的状态对象 initialState 以及一个回调函数，返回一个 Proxy 对象，我们劫持了代理对象的 getter 和 setter，在读取代理对象的值时，将其包装为响应式对象，设置值时执行回调函数。有了 observer，接下来就是如何与 React 视图结合。
forceUpdate
针对第 2 点，在触发更新后，React hooks 语法下如何让视图也进行刷新？
是不是只需要利用 useState 或 useReducer 这类 hook 的原生能力即可，我们调用第二个返回值的 dispatch 函数，触发状态改变就可以让当前组件强制刷新，这里我们选择 useReducer，将 dispatch 函数直接命名为 forceUpdate，
const [, forceUpdate] = useReducer((c) => c + 1, 0);
解决了上述两个问题，我们的 useReactive 就基本实现了，只需要在代理对象设置值时调用 forceUpdate 触发视图更新即可，同时作为一个通用 hook，可以考虑使用 useMemo 对包装后的响应式对象进行缓存，
function useReactive<T extends Record<string, any>>(initialState: T): T {
  const [, forceUpdate] = useReducer((c) => c + 1, 0);
  const state: T = useMemo(() => {
    return observer(initialState, () => {
      forceUpdate();
    });
  }, []);
  return state;
上面的代码已经满足我们的需求了，为了避免 React Hooks 的闭包陷阱，我们还可以考虑对状态对象 initialState 做一层处理，始终代理最新的状态。
useLatest
避免闭包问题的思路就是永远返回最新的值，实现上，我们可以使用 useRef 对值进行缓存，
function useLatest<T>(value: T): { readonly current: T } {
  const ref = useRef(value);
  ref.current = value;
  return ref;
使用 useLatest 优化后，最终的 useReactive 实现如下，
function useReactive<T extends Record<string, any>>(initialState: T): T {
  const ref = useLatest(initialState);
  const [, forceUpdate] = useReducer((c) => c + 1, 0);
  const state: T = useMemo(() => {
    return observer(ref.current, () => {
      forceUpdate();
    });
  }, []);
  return state;
我们写一个经典的计数器例子来验证下 useReactive,
import React, { useEffect } from "react";
import useReactive from "../reactive/useReactive";
export default function Counter() {
  const state = useReactive({ count: 0 });
  // 验证 React Hooks 闭包陷阱
  useEffect(() => {
    setInterval(() => {
      console.log("count: ", state.count);
    }, 1000);
  }, []);
  return (
      <p>count: {state.count}</p>
      <button onClick={() => state.count++}>add</button>
      <button onClick={() => state.count--}>minus</button>
      <button onClick={() => (state.count = 0)}>reset</button>
你可以点击 这里 查看 useReactive 的效果。
实际上，上述的响应式 hook 基本就是 ahooks 里 useReactive 的实现，不过 ahooks 还考虑了，
原对象和 Proxy 代理对象的缓存
状态对象值的类型判断，仅针对 plainObject 和数组进行代理
使用增强的 useCreation 进行缓存，可以理解为增强的 useRef 和 useMemo，缓存值保持最新值，避免实例化的性能隐患
如果你需要在生产环境尝试 useReactive，建议直接使用 ahooks。
React Hooks 时代，对于复杂状态数据的更新，我们可以考虑，
拆分为多个状态避免 Nested Object State
使用类 “class” 时代的自定义 hook useLegcyState 帮助我们自动合并状态
使用基于 Proxy 和不可变状态的 useImmer
使用基于响应式的 useReactive
本文首发于我的 博客，才疏学浅，难免有错误，文章有误之处还望不吝指正！
如果有疑问或者发现错误，可以在评论区进行提问和勘误，
如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励。
👍React with 👍1Shadowzzh