reactjs - 是否可以在条件语句中使用 useMemo 挂钩?
问题描述
我试图在条件语句中使用反应钩子,不幸的是,反应给你几乎所有钩子的错误,它的意图是按照钩子哲学。
然后我在 else 语句中尝试了 useMemo 钩子,它没有任何错误。我用谷歌搜索了这种差异,但没有发现任何有希望的东西。
我的问题, useMemo 是一个例外,您可以在条件语句中使用 useMemo 。
解决方案
不,您不能useMemo
在条件语句中运行或任何其他 React 挂钩。每次渲染组件时,都必须以相同的顺序调用相同的 React 钩子。在我看来,钩子的工作方式真的是违反直觉的,如果不是让 React 如此难以学习的主要因素,它也是其中之一。
有两种可能的解决方法,或者将条件移动到钩子回调中,或者将代码移动到单独的组件中。
以这个示例代码为例:
function MyComponent() {
if (condition) {
const myVar = useMemo(() => { return value; }, [value]);
return <OtherComponent var={myVar}/>;
} else {
return <SomethingElse/>;
}
}
一种选择是:
function MyComponent() {
const myVar = useMemo(() => {
if (condition) {
return value;
}
}, [condition, value]);
if (condition) {
return <OtherComponent var={myVar}/>;
} else {
return <SomethingElse/>;
}
}
另一种选择是:
function MyComponent() {
if (condition) {
return <MyComponent2/>;
} else {
return <SomethingElse/>;
}
}
function MyComponent2() {
const myVar = useMemo(() => { return value; }, [value]);
return <OtherComponent var={myVar}/>;
}
推荐阅读
- ruby-on-rails - 如何在 RSpec/Capybara 测试中进行配置更改?
- javascript - ramda 中的 Concat 对象(项目 nodejs)
- python - 如何在我的脚本中打开 file.py 时显示进度条
- python-3.x - 如何将函数中的更改字符串插入到 Tkinter 中的标签中?
- javascript - 当我在不同组件的输入框中键入时反应 Mapbox 组件闪烁
- gradle - 远程 Gradle 脚本插件缓存
- raster - 克里金预测函数为每个值返回 NAN。[r]
- rest - OData 是唯一适用于 SSO/MFA 环境的方法吗?
- typo3 - 我可以在没有文件收集的情况下将 Typo3 fs-media-gallery 与 sys_category 一起使用吗?
- react-native - FlatList 滚动到 Footer 组件