这两个函数'foo1'和'foo2'有什么区别？ [复制]答案

【问题标题】：What is the difference between these two functions 'foo1' and 'foo2'? [duplicate]这两个函数'foo1'和'foo2'有什么区别？ [复制]
【发布时间】：2021-11-04 09:14:22
【问题描述】：

function foo1() {
return {
bar: "hello"
};
}

function foo2() {
return {
bar: "hello";
}
}

有两个函数 'foo1' 和 'foo2' 可能的输出是什么，这些函数之间的主要区别是什么。

【问题讨论】：

标签： javascript reactjs frontend

【解决方案1】：

前言：如图所示，两者都会导致无限的重新渲染。 setState 调用应该只对其他发生的事情做出反应。

setState(state + 1) 使用state 的范围内值（可能是陈旧的），添加一个，并将其设置为新值。如果state 是陈旧的（同时实际状态值已经更新），那将覆盖之前的更新。

setState(state => state + 1) 要求setState 用state 的保证最新版本调用它，将其加一，然后将其设置为值。

在适当的情况下两者都可以，但在基于现有状态更新状态时，通常您需要第二种（回调）形式，而不是第一种。

更多 here 在 React 文档中。

这是一个人为的示例，使用陈旧的 state1 值演示了差异：

const {useState, useEffect} = React;

const Example = () => {
    const [state1, setState1] = useState(0);
    const [state2, setState2] = useState(0);
    
    useEffect(() => {
        const timer = setInterval(() => {
            // THIS IS INCORRECT (for this situation), it uses a stale value
            // of `state1`
            setState1(state1 + 1);
            
            // This is correct (for this situation)
            setState2(state2 => state2 + 1);
        }, 500);
        return () => {
            clearInterval(timer);
        };
    }, []);
    return <div>
        <div>state1 = {state1}</div>
        <div>state2 = {state2}</div>
    </div>;
};

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

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

有一些工具（例如带有适当插件的 ESLint）会在您使用过时状态变量的某些情况下向您发出警告；例如，来自 eslint-plugin-react-hooks 的 ESLint 的 exhaustive-deps 规则会在 useEffect 依赖项数组中缺少 state1 上方发出警告。

【讨论】：