内部に useState を持つ React コンポーネントがあるとします。
const expensiveCalculation = () => {
// ...
}
export default function AboutPage() {
const [state, setState] = useState(expensiveCalculation())
return (
// ...
);
}
高価な計算関数の結果を使用して状態を開始します。
コンポーネントが再レンダリングされるたびに、useState の初期値としてその結果のみが必要な場合でも、関数 PriceCalculation が実行されます。関数の結果は使用されません。
再レンダリング中の負荷の高い計算を回避するには、関数を呼び出さずに関数自体を渡します。 React は、レンダリングごとではなく、マウント時に関数自体を呼び出すことができるほど賢いです。
const expensiveCalculation = () => {
// ...
}
export default function AboutPage() {
const [state, setState] = useState(expensiveCalculation)
return (
// ...
);
}
以上が意外と知られていない useState パフォーマンスのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
