useMemo 和 useEffect 区别?

Question

老师.还有一个小问题.

import React, { useState, useMemo, useEffect } from 'react';

const App = () => {
  const [a, setA] = useState('a')
  const [b, setB] = useState('b')

  return (
    <div>
      <p>{a} App</p>
      <p>{b} App</p>
      <button onClick={() => {setA(a + a)}}>aaa</button>
      <button onClick={() => {setB(b + b)}}>bbb</button>
      <Children theA={a}>{b}</Children>
    </div>
  )
}

const Children = ({theA, children}) => {

  console.log('children 重新渲染')

  const aChange = (getA) => {
    console.log('useMemo')
    return getA + ' useMemo'
  }

  let EffectA = ''
  useEffect(() => {
    console.log('useEffect')
    EffectA = theA + ' useEffect'
  }, [theA])

  const aVal = useMemo(() => aChange(theA), [theA])

  return (
    <div>
      <p>{EffectA}</p>
      <p>{aVal}</p>
      <p>{children}</p>
    </div>
  )
}

export default App;

我测试了这样一个代码我也想让useEffect实现一个类似useMemo的功能.但是我发现不可以.

1. 是因为useEffect只能去监听 useState 的值吗,为什么获取不到EffectA呢
2. useMemo可不可以理解为一个computed呢?感觉它只是节约了一下资源 根据官方文档:

记住，传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作，诸如副作用这类的操作属于 useEffect 的适用范畴，而不是 useMemo。

我纳闷了,什么叫与渲染无关的操作?是指的除了数据变化之外都属于与渲染无关的操作,是这样理解吗?

问题有点多…不好意思了老师.hhhhhhh…

Answer 1

张轩 2019-11-23 10:57:58

第一个问题没看懂欧 结合你的代码再描述下

上个问题说过了 useEffect 是渲染执行完毕 执行的 额外的操作 useMemo 是缓存操作，可以把不同渲染操作的结果缓存下来 也可以看看这篇文章了解下 写的还不错 https://zhuanlan.zhihu.com/p/66166173