该useEffect阵营钩将运行在功能上传递的每一个变化.这可以进行优化,只有在所需的属性发生变化时才能调用它.
如果我想调用初始化函数componentDidMount而不是在更改时再调用它会怎么样?假设我想加载一个实体,但加载函数不需要组件中的任何数据.我们怎么能用useEffect钩子做这个?
class MyComponent extends React.PureComponent {
componentDidMount() {
loadDataOnlyOnce();
}
render() { ... }
}
Run Code Online (Sandbox Code Playgroud)
使用钩子,这可能是这样的:
function MyComponent() {
useEffect(() => {
loadDataOnlyOnce(); // this will fire on every change :(
}, [...???]);
return (...);
}
Run Code Online (Sandbox Code Playgroud) 我一直在使用React 16.7-alpha中的新钩子系统,当我正在处理的状态是一个对象或数组时,它会在useEffect中陷入无限循环.
首先,我使用useState并使用如下的空对象启动它:
const [obj, setObj] = useState({});
Run Code Online (Sandbox Code Playgroud)
然后,在useEffect中,我使用setObj将其再次设置为空对象.作为第二个参数,我传递[obj],希望如果对象的内容没有改变,它不会更新.但它不断更新.我想因为无论内容如何,这些都是不同的对象,让React认为它在不断变化?
useEffect(() => {
setIngredients({});
}, [ingredients]);
Run Code Online (Sandbox Code Playgroud)
数组也是如此,但作为一个原语,它不会像预期的那样卡在循环中.
使用这些新的钩子,在检查天气内容是否发生变化时,我应该如何处理对象和数组?