javascript - 在 React useState 中使用(或 ||)语法进行赋值

Question

我正在react useState Hook 中观察到以前从未见过的新语法。这是

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

我以前从未见过在 useState 中使用过这个或构造。我知道它是一个 JavaScript native 逻辑运算符，但我很好奇如何在 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>