在React useState内部使用(Or||)语法进行赋值

Question

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

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

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

它本质上是否意味着，"如果这两件事中的任何一件都是真的，就把它设定为事实？"它是否假设这两件事情永远不可能同时是真的？

Answer 1

它只是用作声明回退的简洁语法。如果第一个变量是falsy，它将回落到第二个。

null第一个值的示例：

const {useState} = React;
const test = null;
const fallback = 'fallback';
const Example = () => {
const [state, setState] = useState(test || fallback);
console.log("state: ", state); // Logs the value of fallback

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 = () => {
const [state, setState] = useState(test || fallback);
console.log("state: ", state); // Logs the value of test

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中的Double Pipe Operator(Logical OR(将返回第一个可以转换为true的值。

这并不是React独有的，它是一个可以在任何地方使用的普通JS操作符。

以下是一些例子(取自MDN(：

o1 = true  || true       // t || t returns true
o2 = false || true       // f || t returns true
o3 = true  || false      // t || f returns true
o4 = false || (3 == 4)   // f || f returns false
o5 = 'Cat' || 'Dog'      // t || t returns "Cat"
o6 = false || 'Cat'      // f || t returns "Cat"
o7 = 'Cat' || false      // t || f returns "Cat"
o8 = ''    || false      // f || f returns false
o9 = false || ''         // f || f returns ""
o10 = false || varObject // f || object returns varObject

注意：如果使用此运算符为某个变量提供默认值，请注意不会使用任何错误的值。如果您只需要过滤掉null或未定义，请考虑使用null合并运算符

Answer 3

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

如果thing或otherThing中的任何一个计算为真实表达式，则调用useState(true)并返回一个由2项组成的元组。

如果thing和otherThing都没有计算为真实表达式，则调用useState(false)并返回一个包含2个项的元组。

一些不真实表达的例子：

• false
• null
• undefined
• ""
• []
• {}
• 1+1==3