您可以将loading状态和data状态合并为一个状态对象，然后您可以进行一次setState调用，并且只会有一次渲染。

注意：与setState类中的组件不同，从setState返回的useState对象不会将对象与现有状态合并，而是完全替换对象。如果要进行合并，则需要阅读以前的状态并将其与新值合并。请参阅文档。

在您确定存在性能问题之前，我不会太担心过度调用渲染。渲染（在 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>

这也有另一个解决方案，使用useReducer! 首先我们定义我们的新setState.

const [state, setState] = useReducer(
  (state, newState) => ({...state, ...newState}),
  {loading: true, data: null, something: ''}
)

之后我们就可以像旧类一样简单地使用它this.setState，只是没有this！

setState({loading: false, data: test.data.results})

正如您可能在我们的 new 中注意到的setState（就像我们之前使用的一样this.setState），我们不需要一起更新所有状态！例如，我可以像这样改变我们的状态之一（它不会改变其他状态！）：

setState({loading: false})

厉害了哈？！

所以让我们把所有的部分放在一起：

import {useReducer} from 'react'

const getData = url => {
  const [state, setState] = useReducer(
    (state, newState) => ({...state, ...newState}),
    {loading: true, data: null}
  )

  useEffect(async () => {
    const test = await api.get('/people')
    if(test.ok){
      setState({loading: false, data: test.data.results})
    }
  }, [])

  return state
}

typescript支持。感谢P. Galbraith回答了这个解决方案，那些使用typescript的人可以使用这个：

useReducer<Reducer<MyState, Partial<MyState>>>(...)

MyState你的状态对象的类型在哪里。

例如，在我们的例子中，它会是这样的：

interface MyState {
   loading: boolean;
   data: any;
   something: string;
}

const [state, setState] = useReducer<Reducer<MyState, Partial<MyState>>>(
  (state, newState) => ({...state, ...newState}),
  {loading: true, data: null, something: ''}
)

以前的国家支持。在评论中user2420374要求一种方法来访问我们的prevState内部setState，所以这里有一种方法可以实现这个目标：

const [state, setState] = useReducer(
    (state, newState) => {
        newWithPrevState = isFunction(newState) ? newState(state) : newState
        return (
            {...state, ...newWithPrevState}
        )
     },
     initialState
)

// And then use it like this...
setState(prevState => {...})

isFunction检查传递的参数是函数（这意味着您正在尝试访问 prevState）还是普通对象。您可以在此处找到Alex Grande 对 isFunction 的实现。

注意。对于那些想经常使用这个答案的人，我决定把它变成一个图书馆。你可以在这里找到它：

Github：https : //github.com/thevahidal/react-use-setstate

NPM：https : //www.npmjs.com/package/react-use-setstate

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

如果从基于 React 的事件中触发状态更新，例如按钮单击或输入更改，React 当前将批处理状态更新。如果在 React 事件处理程序之外触发更新，则不会批量更新，例如异步调用。

这将：

const [state, setState] = useState({ username: '', password: ''});

// later
setState({
    ...state,
    username: 'John'
});

要复制this.setState从类零件的合并行为，作出react的文档推荐使用的函数形式useState与传播对象-无需为useReducer：

setState(prevState => {
  return {...prevState, loading, data};
});

这两个状态现在合并为一个状态，这将为您节省渲染周期。

一个状态对象还有另一个优点：loading并且data是依赖状态。当状态放在一起时，无效的状态更改变得更加明显：

setState({ loading: true, data }); // ups... loading, but we already set data

你甚至可以更好地确保一致的状态 通过1）使状态- ，，等-明确使用你的状态和2）在减速封装状态逻辑：loadingsuccesserroruseReducer

const useData = () => {
  const [state, dispatch] = useReducer(reducer, /*...*/);

  useEffect(() => {
    api.get('/people').then(test => {
      if (test.ok) dispatch(["success", test.data.results]);
    });
  }, []);
};

const reducer = (state, [status, payload]) => {
  if (status === "success") return { ...state, data: payload, status };
  // keep state consistent, e.g. reset data, if loading
  else if (status === "loading") return { ...state, data: undefined, status };
  return state;
};

const App = () => {
  const { data, status } = useData();
  return status === "loading" ? <div> Loading... </div> : (
    // success, display data 
  )
}

const useData = () => {
  const [state, dispatch] = useReducer(reducer, {
    data: undefined,
    status: "loading"
  });

  useEffect(() => {
    fetchData_fakeApi().then(test => {
      if (test.ok) dispatch(["success", test.data.results]);
    });
  }, []);

  return state;
};

const reducer = (state, [status, payload]) => {
  if (status === "success") return { ...state, data: payload, status };
  // e.g. make sure to reset data, when loading.
  else if (status === "loading") return { ...state, data: undefined, status };
  else return state;
};

const App = () => {
  const { data, status } = useData();
  const count = useRenderCount();
  const countStr = `Re-rendered ${count.current} times`;

  return status === "loading" ? (
    <div> Loading (3 sec)... {countStr} </div>
  ) : (
    <div>
      Finished. Data: {JSON.stringify(data)}, {countStr}
    </div>
  );
}

//
// helpers
//

const useRenderCount = () => {
  const renderCount = useRef(0);
  useEffect(() => {
    renderCount.current += 1;
  });
  return renderCount;
};

const fetchData_fakeApi = () =>
  new Promise(resolve =>
    setTimeout(() => resolve({ ok: true, data: { results: [1, 2, 3] } }), 3000)
  );

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w=" crossorigin="anonymous"></script>
<div id="root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>

PS：务必请对前缀定制钩用use（useData而不是getData）。还通过回调来useEffect不能是async。