我发现 函数完全可以也放在 useMemo 里用，和 useCallback 效果一样

Question

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 分出来代码更好看？

Answer 1

双越 2021-06-06 14:46:10

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

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

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

• 提问者 起点丶 #1

  非常感谢！