首先看一个标准的使用reac hooks的案例：
const useUserList = () => {
const [pending, setPending] = useState(false);
const [users, setUsers] = useState([]);
const load = async params => {
setPending(true);
setUsers([]);
const users = await request('/users', params);
setUsers(users);
setPending(false);
};
const deleteUser = useCallback(
user => setUsers(users => without(users, user)),
[]
);
const addUser = useCallback(
user => setUsers(users => users.concat(user)),
[]
);
return [users, {pending, load, addUser, deleteUser}];
};
提供了用户列表，有加载、添加、删除三个功能，如果团队能用到这种粒度，也算前10%水平了吧。
但是，这个hook的实现其实是有问题的，这个hook包含了多方向的功能，让我们拆一拆：
1.加载一个远程数据，并且控制“加载中”状态。
2.往一个数组中增加或删除内容。
3.将一份数据（列表）和这份数据的相关操作（add、delete）合在一起返回。
4.指定加载用户列表这个具体业务场景。
一但这样去拆解，不难发现其实1-3全是通用能力，而不是业务相关的。
所以我得出来一个比较经典的hook的分层拆解的玩法。
状态与操作封装
如同面向对象强调的是状态（properties）与操作（methods）的封装，虽然我们在React里大量追求函数式，但也并不代表我们应该反对面向对象的封装特性。
把一个状态和它强相关的行为放在一起，显而易见地是一种合理的编程模式。
因此，在hook分层的最底层，我建议大家都有一个功能有，叫作“给我一个值和一堆方法，我帮你变成hook”，在我的实现里我叫它useMethods。这个东西超容易实现：
export const useMethods = (initialValue, methods) => {
const [value, setValue] = useState(initialValue);
const boundMethods = useMemo(
() => Object.entries(methods).reduce(
(methods, [name, fn]) => {
const method = (...args) => {
setValue(value => fn(value, ...args));
};
methods[name] = method;
return methods;
},
{}
),
[methods]
);
return [value, boundMethods];
};
什么你说太绕了都快晕了？玩React哪有不绕的道理……
封装常用数据结构
有了与任何类型都无关的基础的方法封装，我们就可以在它的基础上衍生出最常见的数据结构了。正如原生的数组有push、pop、slice等方法，原生的字符串有trim、padStart、repeat等方法，把这些东西包一包也能变成“数组hook”、“字符串hook”这样的基础hook。这里需要注意的是，你不能把useArray的push直接引到数组的push上去，因为我们对状态的更新要求是immutable的，所以push要对应concat，pop要对应slice，总之这是很容易的：
const arrayMethods = {
push(state, item) {
return state.concat(item);
},
pop(state) {
return state.slice(0, -1);
},
slice(state, start, end) {
return state.slice(start, end);
},
empty() {
return [];
},
set(state, newValue) {
return newValue;
},
remove(state, item) {
const index = state.indexOf(item);
if (index < 0) {
return state;
}
return [...state.slice(0, index), ...state.slice(index + 1)];
}
};
const useArray = (initialValue = []) => {
invariant(Array.isArray(initialValue), 'initialValue must be an array');
return useMethods(initialValue, arrayMethods);
};
相应的，数字我们也可以玩一玩：
const numberMethods = {
increment(value) {
return value + 1;
},
decrement(value) {
return value - 1;
},
set(current, newValue) {
return newValue;
}
};
const useNumber = (initialValue = 0) => {
invariant(typeof initialValue === 'number', 'initialValue must be an number');
return useMethods(initialValue, numberMethods);
};
随你高兴吧，有闲情的可以把什么链表、树、队列、栈、堆、冠军树、红黑树全给来一遍，你高兴就好。
通用过程封装
数据结构毕竟还只是最基础的东西，我们不能只有数据结构就去写代码，我们还需要利用数据结构串起来的过程。
比如在最前面的例子里，对“异步调用”这个事情就是一个很经典的过程。
因此，我们可以有这样的一个hook，它的作用是“给我一个异步函数，我帮你调用它并管理异步状态”，我叫它useTaskPending，功能也简单，直接用useNumber去管一管异步状态就好：
const useTaskPending = task => {
const [pendingCount, {increment, decrement}] = useNumber(0);
const taskWithPending = useCallback(
async (...args) => {
increment();
const result = await task(...args);
decrement();
return result;
},
[task, increment, decrement]
);
return [taskWithPending, pendingCount > 0];
};
再给它进一步，我们想要不仅仅能调用过程，还能把结果给同步到状态里：
const useTaskPendingState = (task, storeResult) => {
const [taskWithPending, pending] = useTaskPendingState(task);
const callAndStore = useCallback(
() => {
const result = await taskWithPending();
storeResult(result);
},
[taskWithPending, storeResult]
);
return [callAndStore, pending];
};
拼装成业务
有数据结构，有过程，现在再去拼一个业务就简单了，像这样：
const useUserList = () => {
const [users, {push, remove, set}] = useArray([]);
const [load, pending] = useTaskPendingState(listUsers, set);
return [users, {pending, load, addUser: push, deleteUser: remove}];
};
你可以看到，很直观地是代码少了那么几行，进而每一行代码都有更强的语义化了，比如useArray明确这里就是一个数组，对比useState还要去看参数才知道是数组还是对象干净利落了不少。更重要的是，基于前面的方法、数据结构、过程这3层，你可以更快地搞出“文章列表”、“评论列表”、“用户详情”等等一系列的业务，而不需要重复地去管理pending、管理数组之类的冗余的事情。
兴致有限，就先简单地介绍一下hook最最基础的状态管理部分的实践玩法。顺便这代码能不能跑我不知道，只代表想法不代表实现~其它如context怎么玩、effect怎么玩、ref有多牛逼、memo有多坑、subscription怎么用，甚至怎么快速写一个小型redux等等，就不赘述了。
欢迎关注我的个人公众号【小恶魔君】，全是原创的有趣有料有理有据的内容。
如何去合理使用 React hook？ - 转载自知乎
