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

我正在观察一个在react useState挂钩中从未见过的新语法。它的

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

我以前从未见过在useState内部使用过该构造方法。我知道这是一个JavaScript本机逻辑运算符，但是我很好奇如何在useState的上下文中解释它。

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

最佳答案

它仅用作声明后备状态的简洁语法。如果第一个变量是虚假的，它将变回第二个。

带有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>