Reactjs 我是否需要对functional react组件中的函数属性使用useCallback钩子来避免扩散?
创建功能组件时,例如:Reactjs 我是否需要对functional react组件中的函数属性使用useCallback钩子来避免扩散?,reactjs,Reactjs,创建功能组件时,例如: const SomeParentComponent = ({someMessage, ...otherProps})=>{ const handleClick = ()=>{ console.log(someMessage); }; return <SomeComplexComponent onClick={handleClick} ...otherProps /> }; 理论上,这将导致对任何一个特定的
const SomeParentComponent = ({someMessage, ...otherProps})=>{
const handleClick = ()=>{
console.log(someMessage);
};
return <SomeComplexComponent onClick={handleClick} ...otherProps />
};
理论上,这将导致对任何一个特定的“someMessage”使用相同的回调函数实例,从而避免不必要的差异
这是我目前对事物的理解,但无论我在网上看什么地方,我看到的函数组件中唯一的回调示例,就是不必担心useCallback
现在我开始怀疑我自己的知识可能有缺陷
有人能告诉我我是否正确,我在互联网上看到的几乎每一个例子都是“不理想”的吗?还是我对这个主题的了解不正确?我想你是指渲染部分的扩散。渲染仍将进行。所发生的是创建函数的记忆版本 因此,如果依赖关系没有改变,就不需要创建所述函数的另一个实例 您的困惑必须来自文档中的行: 这在将回调传递给依赖引用相等性的优化子组件以防止不必要的渲染(例如shouldComponentUpdate)时非常有用 但它指的是一个子组件,它将回调作为一个道具接收,并查看该道具以检查它是否应该呈现(PureComponents和shouldComponentUpdate)。使用useCallback时,使用相同的函数(假定依赖项没有更改),从而使prop不会触发任何更新 因此,为了更好地回答您的问题,如果您有以下子组件:
...
const handleClick = useCallback(()=>{
console.log(someMessage);
}, [someMessage]);
...