使用 useState 多次渲染问题
使用hooks时经常会写出下面的代码，然后就会发现页面渲染了两遍，有时候会更头疼。
const [loading, setLoading] = useState(true);
const [data, setData] = useState(null);
useEffect(async () => {
const res = await axios.get("xxx");
setLoading(false);
setData(res);
}, []);
在React中，同步代码会合并渲染，异步代码不会合并渲染。
下面的代码只会渲染一次，它会将setLoading和setData进行合并。这个其实和类组件是一样的，在异步函数中不会合并setState。
const [loading, setLoading] = useState(true);
const [data, setData] = useState(null);
useEffect(() => {
setLoading(false);
setData({ a: 1 });
}, []);
类组件中解决多次渲染问题比较好弄，但是在hooks就比较麻烦。
方法一：将多个状态合并到一个状态中
将所有的依赖状态都放到一个对象中，在setState一起设置，就能解决多次渲染的问题了，如下代码
const [request, setRequest] = useState({ loading: true, data: null });
useEffect(async () => {
const res = await axios.get("xxx");
setRequest({ loading: false, data: res });
}, []);
但是这样有个问题，如果只想setState一个依赖项时，需要将别的依赖项也要传进去，否则这个值会丢失。React内部并不会帮你做去合并。
setRequest({ data: res }); // loading 值丢失了。
解决方法是使用扩展运算符
setRequest({ ...request, data: res });
// 或者
setRequest((prevState) => ({ ...prevState, data: res }));
方法二：写一个自定义合并依赖项的hook
每次setState都要使用扩展运算符合并依赖项太麻烦了。
使用React自定义hook功能，写一个合并依赖项的useMergeState钩子。
自定义hook需要使用use开头。
const useMergeState = (initialState) => {
const [state, setState] = useState(initialState);
const setMergeState = (newState) =>
setState((prevState) => ({ ...prevState, newState }));
return [state, setMergeState];
};
/* 使用 */
const [request, setRequest] = useMegeState({ loading: false, data: null });
useEffect(async () => {
const res = await axios.get("xxx");
setRequest({ loading: true, data: res });
// ...
setRequest({ data: { a: 1 } }); // loading 状态不会丢失，还是 true
}, []);
方案三：使用useReducer
React提供了useReducer来管理各个依赖项，而不是使用useState。
const [request, setRequest] = useReducer(
(prevState, newState) => ({ ...prevState, newState }),
{ loading: false, data: null }
);
useEffect(async () => {
const res = await axios.get("xxx");
setRequest({ loading: true, data: res });
// ...
setRequest({ data: { a: 1 } }); // loading 状态不会丢失，还是 true
}, []);
如果想要获取上一个状态，需要对上面的代码进行改造。
const [request, setRequest] = useReducer(
(prevState, newState) => {
const newWithPrevState = typeof newState === "function" ? newState(prevState) : newState;
return{ ...prevState, newWithPrevState })
},
{ loading: false, data: null }
);
useEffect(async () => {
const res = await axios.get("xxx");
setRequest((prevState) => {
console.log(prevState)
return { loading: true, data: res }
});
// ...
setRequest({ data: { a: 1 } }); // loading 状态不会丢失，还是 true
}, []);
