从组件中的useState多次调用状态更新程序会导致多次重新呈现 [英] Multiple calls to state updater from useState in component causes multiple re-renders

问题描述

我第一次尝试React钩子，所有看起来都很好，直到我意识到当我获取数据并更新两个不同的状态变量（数据和加载标志）时，我的组件（数据表）呈现两次，甚至虽然对状态更新程序的两次调用都发生在同一个函数中。这是我的api函数，它将两个变量都返回给我的组件。

I'm trying React hooks for the first time and all seemed good until I realised that when I get data and update two different state variables (data and loading flag), my component (a data table) is rendered twice, even though both calls to the state updater are happening in the same function. Here is my api function which is returning both variables to my component.

const getData = url => {

    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(async () => {

        const test = await api.get('/people')

        if(test.ok){
            setLoading(false);
            setData(test.data.results);
        }

    }, []);

    return { data, loading };
};

在普通的类组件中，您只需调用一次即可更新状态，这可能是一个复杂的状态对象，但钩子方式似乎是将状态分成更小的单位，当它们单独更新时，其副作用似乎是多次重新渲染。任何想法如何缓解这个？

In a normal class component you'd make a single call to update the state which can be a complex object but the "hooks way" seems to be to split the state into smaller units, a side effect of which seems to be multiple re-renders when they are updated separately. Any ideas how to mitigate this?

推荐答案

你可以结合 loading state和 data 状态为一个状态对象然后你可以做一个 setState 调用，只有一个渲染。

You could combine the loading state and data state into one state object and then you could do one setState call and there will only be one render.

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

Note: Unlike the setState in class components, the setState returned from useState doesn't merge objects with existing state, it replaces the object entirely. If you want to do a merge, you would need to read the previous state and merge it with the new values yourself. Refer to the docs.

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

I wouldn't worry too much about calling renders excessively until you have determined you have a performance problem. Rendering (in the React context) and committing the virtual DOM updates to the real DOM are different matters. The rendering here is referring to generating virtual DOMs, and not about updating the browser DOM. React may batch the setState calls and update the browser DOM with the final new state.

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>

这篇关于从组件中的useState多次调用状态更新程序会导致多次重新呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！