在 React useState 中使用（或 ||）语法进行赋值

Question

我在 react useState 钩子中观察到了一种我以前从未见过的新语法。它是

const [thing, setThing] = useState(thing || otherThing);

我以前从未见过在 useState 中使用过这种结构或结构。我知道它是一个 javascript 本机逻辑运算符，但我很好奇如何在 useState 的上下文中解释它。

它本质上是否意味着“如果这些事情中的任何一个是真实的，请将其设置为事物？”是否假设它们永远不可能同时为真？

Answer 1

它只是用作声明后备的简洁语法。如果第一个变量是假的，它将回退到第二个。null第一个值的示例：const {useState} = React;const test = null;const fallback = 'fallback';const Example = () => {&nbsp; const [state, setState] = useState(test || fallback);&nbsp; &nbsp;console.log("state: ", state); // Logs the value of fallback&nbsp; &nbsp;&nbsp; &nbsp;return <span />}ReactDOM.render(<Example />, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script><div id="root"></div>但是如果第一个变量是真的，它就会被使用：const {useState} = React;const test = 'first priority';const fallback = true;const Example = () => {&nbsp; const [state, setState] = useState(test || fallback);&nbsp; &nbsp;console.log("state: ", state); // Logs the value of test&nbsp; &nbsp;&nbsp; &nbsp;return <span />}ReactDOM.render(<Example />, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script><div id="root"></div>

Answer 2

Javascript 中的双管道运算符（逻辑或）将返回第一个可以转换为true.这不是 React 独有的，它是一个烘焙的 vanilla-JS 运算符，你可以在任何地方使用。以下是一些示例（取自 MDN）：o1 = true&nbsp; || true&nbsp; &nbsp; &nbsp; &nbsp;// t || t returns trueo2 = false || true&nbsp; &nbsp; &nbsp; &nbsp;// f || t returns trueo3 = true&nbsp; || false&nbsp; &nbsp; &nbsp; // t || f returns trueo4 = false || (3 == 4)&nbsp; &nbsp;// f || f returns falseo5 = 'Cat' || 'Dog'&nbsp; &nbsp; &nbsp; // t || t returns "Cat"o6 = false || 'Cat'&nbsp; &nbsp; &nbsp; // f || t returns "Cat"o7 = 'Cat' || false&nbsp; &nbsp; &nbsp; // t || f returns "Cat"o8 = ''&nbsp; &nbsp; || false&nbsp; &nbsp; &nbsp; // f || f returns falseo9 = false || ''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// f || f returns ""o10 = false || varObject // f || object returns varObject注意：如果您使用此运算符为某个变量提供默认值，请注意不会使用任何虚假值。如果您只需要过滤掉 null 或 undefined，请考虑使用nullish coalescing 运算符

Answer 3

const [thing, setThing] = useState(thing || otherThing);如果其中一个thing或otherThing计算结果为真实表达式，则useState(true)调用 then 并返回 2 个项目的元组。如果两者thing都不otherThing计算为真实表达式，则useState(false)调用 then 并返回 2 个项目的元组。一些不真实的表达的例子：falsenullundefined""[]{}1+1==3