javascript - 这两个函数 'foo1' 和 'foo2' 有什么区别？

Question

这个问题已经有答案了:

What does arrow function '() => {}' mean in Javascript? [duplicate] (2 个回答)

已关闭 2 年前。

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

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

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

Answer 1

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

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 的 exhaustive-deps 规则来自 eslint-plugin-react-hooks会发出上面的警告，指出 useEffect 依赖项数组中缺少 state1。