除了Yangshun Tay的答案，你最好记住setMergedState函数，这样它每次渲染都会返回相同的引用，而不是新函数。如果TypeScript linter强迫你在useCallback或父组件useEffect中传递setMergedState作为依赖项，这可能是至关重要的。

import {useCallback, useState} from "react";

export const useMergeState = <T>(initialState: T): [T, (newState: Partial<T>) => void] => {
    const [state, setState] = useState(initialState);
    const setMergedState = useCallback((newState: Partial<T>) =>
        setState(prevState => ({
            ...prevState,
            ...newState
        })), [setState]);
    return [state, setMergedState];
};

你可以将加载状态和数据状态合并到一个状态对象中，然后你可以做一个setState调用，只会有一个呈现。

注意:与类组件中的setState不同，useState返回的setState不会将对象与现有状态合并，它会完全替换对象。如果希望进行合并，则需要读取之前的状态，并自己将其与新值合并。参考文档。

在确定有性能问题之前，我不会太担心过度调用渲染。渲染(在React上下文中)和将虚拟DOM更新提交到真实DOM是不同的事情。这里的呈现指的是生成虚拟DOM，而不是更新浏览器DOM。React可以批处理setState调用，并使用最终的新状态更新浏览器DOM。

const {useState, useEffect} = React; function App() { const [userRequest, setUserRequest] = useState({ loading: false, user: null, }); useEffect(() => { // Note that this replaces the entire object and deletes user key! setUserRequest({ loading: true }); fetch('https://randomuser.me/api/') .then(results => results.json()) .then(data => { setUserRequest({ loading: false, user: data.results[0], }); }); }, []); const { loading, user } = userRequest; return ( <div> {loading && 'Loading...'} {user && user.name.first} </div> ); } ReactDOM.render(<App />, document.querySelector('#app')); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>

替代方案-编写自己的州合并钩子

const {useState, useEffect} = React; function useMergeState(initialState) { const [state, setState] = useState(initialState); const setMergedState = newState => setState(prevState => Object.assign({}, prevState, newState) ); return [state, setMergedState]; } function App() { const [userRequest, setUserRequest] = useMergeState({ loading: false, user: null, }); useEffect(() => { setUserRequest({ loading: true }); fetch('https://randomuser.me/api/') .then(results => results.json()) .then(data => { setUserRequest({ loading: false, user: data.results[0], }); }); }, []); const { loading, user } = userRequest; return ( <div> {loading && 'Loading...'} {user && user.name.first} </div> ); } ReactDOM.render(<App />, document.querySelector('#app')); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>

您还可以使用useEffect来检测状态变化，并相应地更新其他状态值

批处理更新在react-hooks https://github.com/facebook/react/issues/14259

React目前会批处理状态更新，如果它们是在一个基于React的事件中触发的，比如按钮点击或输入更改。如果它们是在React事件处理程序之外触发的，就像异步调用一样，它不会批量处理更新。

如果你正在使用第三方钩子，并且不能将状态合并到一个对象或使用useReducer，那么解决方案是使用:

ReactDOM.unstable_batchedUpdates(() => { ... })

此处由丹·阿布拉莫夫推荐

请看这个例子

补充一点回答https://stackoverflow.com/a/53575023/121143

太酷了!对于那些计划使用这个钩子的人来说，它可以用一种有点健壮的方式来使用function作为参数，比如:

const useMergedState = initial => {
  const [state, setState] = React.useState(initial);
  const setMergedState = newState =>
    typeof newState == "function"
      ? setState(prevState => ({ ...prevState, ...newState(prevState) }))
      : setState(prevState => ({ ...prevState, ...newState }));
  return [state, setMergedState];
};

更新:优化版本，当传入的部分状态没有改变时，状态不会被修改。

const shallowPartialCompare = (obj, partialObj) =>
  Object.keys(partialObj).every(
    key =>
      obj.hasOwnProperty(key) &&
      obj[key] === partialObj[key]
  );

const useMergedState = initial => {
  const [state, setState] = React.useState(initial);
  const setMergedState = newIncomingState =>
    setState(prevState => {
      const newState =
        typeof newIncomingState == "function"
          ? newIncomingState(prevState)
          : newIncomingState;
      return shallowPartialCompare(prevState, newState)
        ? prevState
        : { ...prevState, ...newState };
    });
  return [state, setMergedState];
};