在 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 = () => {

  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 中的双管道运算符（逻辑或）将返回第一个可以转换为true.

这不是 React 独有的，它是一个烘焙的 vanilla-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 或 undefined，请考虑使用nullish coalescing 运算符

Answer 3

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

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

如果两者thing都不otherThing计算为真实表达式，则useState(false)调用 then 并返回 2 个项目的元组。

一些不真实的表达的例子：

• false

• null

• undefined

• ""

• []

• {}

• 1+1==3