我发现 函数完全可以也放在 useMemo 里用,和 useCallback 效果一样
来源:14-9 使用useCallback做性能优化

起点丶
2021-06-06
const userInfo = useMemo(() => {
const changeInput = function (e) {
console.log(e.target.value)
}
return { name, age: 20, changeInput }
}, [name])
// 传给Child
<Child userInfo={userInfo}/>
Child 使用时候
const Child = memo(function Child(props) {
const { userInfo } = props
console.log('child rending')
return (
<div>
<h2>这是 child</h2>
<p> userInfo: {userInfo.name} {userInfo.age}</p>
<input onChange={userInfo.changeInput} />
</div>
)
})
- 同样可以达到不更新子组件的效果,应该效果都一样吧?只是 useCallback 分出来代码更好看?
写回答
1回答
-
函数也是一个变量嘛,非要这么用肯定是可以的。
但 React 区分了 useMemo 和 useCallback ,那最好按照文档建议的去做。
如果你非不这么做,非要用 useMemo 去处理函数,我猜测会出现一些很蛋疼的问题,我没去试过。
012021-06-06
相似问题