javascript - 如何使用函数计算 react js 状态 Hook 的默认值？

Question

我正在做这样的事情:

function App() {

  const [state1, setState1] = useState([1,1,1,1,1,1]);
  const [state2, setState2] = useState(MyFunction());

  return (
    <div className="App">
    <button onClick={() => setState1([1,2,3,4,5,6])}>test</button>
    </div>
  );
}

const MyFunction= () => {
  alert("MyFunction");
  return 5;
}

奇怪的是 alert("MyFunction"); 行在加载时触发 2 次，每次点击测试按钮时触发 2 次。

我是 React.js 的新手，我不理解这种行为。

Answer 1

回答你的问题:

how to calculate default value for react js state hook with a function?

useState允许函数作为“初始状态工厂”，例如:

const [ state, setState ] = useState( function(){ return Math.random(); } );

因此，如果您想将 MyFunction 用作工厂，只需按以下方式使用它:

const [ state2, setState2 ] = useState( MyFunction );

为什么每次点击都会调用 MyFunction？

React 函数式组件只是一个 javascript 函数。

React 决定何时调用此函数，这基本上是在发生变化时调用。调用一些 setState() 是原因之一React 将再次调用功能组件的函数(在本例中为您的 App() 函数)。

但我建议你考虑调用 App() 函数“只要 React 想要调用它”，或者 “一直，一次又一次”再次”。意思是你不应该依赖函数组件的函数何时被调用，你应该依赖 React 做出的保证关于状态何时是最新的，特别是 useEffect , useState , ...

MyFunction() 只是一个函数调用，它在 App() 函数调用中，所以 - 当然 - MyFunction() 被称为每当调用 App() 时(即“一次又一次”)。

为什么 alert() 被调用了两次？

功能组件在 Strict Mode 中被调用了 2 次.仅当您没有按预期使用 React 时才会导致意外行为(这对于 React 初学者来说只是发生的事情)。

如果您以预期的方式使用 React，则不必关心该函数是被调用一次、两次还是多次。唯一重要的是状态是什么。

另见例如React.Component class constructor runs once without console.log?