我发现 函数完全可以也放在 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回答

双越

2021-06-06

函数也是一个变量嘛,非要这么用肯定是可以的。

但 React 区分了 useMemo 和 useCallback ,那最好按照文档建议的去做。

如果你非不这么做,非要用 useMemo 去处理函数,我猜测会出现一些很蛋疼的问题,我没去试过。

0
1
起点丶
非常感谢!
2021-06-06
共1条回复

前端框架及项目面试 聚焦Vue3/React/Webpack

面向1-3年前端的框架及项目面试“刚需内容”

4695 学习 · 1667 问题

查看课程