组件中从USESTAT多次调用状态更新程序会导致多次重新呈现

Question

我第一次尝试React钩子，一切似乎都很好，直到我意识到当我获取数据并更新两个不同的状态变量（数据和加载标志）时，我的组件（数据表）会呈现两次，尽管对状态更新器的两次调用都发生在同一个函数中。下面是我的api函数，它将两个变量都返回到我的组件中。

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 };
};

在普通的类组件中，您只需调用一次来更新状态，状态可能是一个复杂的对象，但“挂钩方式”似乎是将状态拆分为更小的单元，其副作用似乎是在单独更新时多次重新呈现。有什么想法可以减轻这种情况吗？

Answer 1

您可以将加载状态和数据状态组合到一个状态对象中，然后执行一个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>