javascript - 使用 useState Hook 时 - 更改 setState 函数调用顺序是否重要？

Question

我有一个带有两个状态变量的 React 功能组件(itemsData 和 itemsCollections)。变量在 useEffect 方法中更新。但是在 useEffect 发生之后，其中一个状态变量是 null。

切换 setStateFunctions (setItemsData & setItemsCollect) 调用顺序后，两个参数都按预期初始化。

怎么样？

const MyComponent = ({itemsIds}) => {
   const [itemsData, setItemsData] = useState([]);
   const [itemsCollections, setItemsCollect] = useState({});

 useEffect(() => {
        fetchItemsData({ itemsIds }).then(({ items, itemCollect }) => {
             setItemsData(items);
             setItemsCollect(itemCollect);
        })
    }, [itemsIds]);
...
console.log('itemsData', itemsData) // the expected array
console.log('itemCollect', itemCollect) // empty objecy

useEffect 后的状态:itemCollect = {}, itemsData = [{value:...},...]

切换调用顺序:

const MyComponent = ({itemsIds}) => {
   ...
 useEffect(() => {
        fetchItemsData({ itemsIds }).then(({ items, itemCollect }) => {
             setItemsCollect(itemCollect); // <--> switched rows
             setItemsData(items); // <--> switched rows

        })
    }, [itemsIds]);
...
console.log('itemsData', itemsData) // the expected array
console.log('itemCollect', itemCollect) // the expected object

useEffect 之后的状态:itemCollect = { someValue: ...} , itemsData = [{value:...},...]

Answer 1

有一种称为批处理的性能优化，can change between React versions .应用此优化后，多个 setState 调用将在下一次渲染之前一起批处理(顺序无关紧要)。

如果未应用(例如，在您的情况下的 Promise 内部，请参阅 Does React batch state update functions when using hooks? )，则每次状态更新都将触发新的渲染(并且顺序很重要)。

=> console.log('itemCollect', itemCollect) 可能会在每个渲染中记录不同的数据。

如果您需要强制更新单个状态，则从 useReducer 调用单个调度可能是最好的选择。