useMemo 和 useEffect 区别?
来源:3-6 useEffect 可控 effect

wykun
2019-11-23
老师.还有一个小问题.
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的功能.但是我发现不可以.
- 是因为useEffect只能去监听 useState 的值吗,为什么获取不到EffectA呢
- useMemo可不可以理解为一个computed呢?感觉它只是节约了一下资源 根据官方文档:
记住,传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作,诸如副作用这类的操作属于 useEffect 的适用范畴,而不是 useMemo。
我纳闷了,什么叫与渲染无关的操作?是指的除了数据变化之外都属于与渲染无关的操作,是这样理解吗?
问题有点多…不好意思了老师.hhhhhhh…
写回答
1回答
-
张轩
2019-11-23
第一个问题没看懂欧 结合你的代码再描述下
上个问题说过了 useEffect 是渲染执行完毕 执行的 额外的操作 useMemo 是缓存操作,可以把不同渲染操作的结果缓存下来 也可以看看这篇文章了解下 写的还不错 https://zhuanlan.zhihu.com/p/66166173
00
相似问题