react里useEffect、useMemo的区别

编程入门行业动态更新时间:2024-10-16 02:31:06

react里useEffect、useMemo的<a href=https://www.elefans.com/category/jswz/34/1769972.html style= 区别"/>

react里useEffect、useMemo的区别

useEffect

Effect Hook可以让你在函数组件中执行副作用操作，这里提到副作用，什么是副作用呢，就是除了状态相关的逻辑，比如网络请求，监听事件，查找dom

useEffect类似于class组件中的生命周期函数，useEffect可以代替class组件中的三个生命周期，分别是：

componentDidMount 组件渲染执行函数、

componentDidUpdate 组件更新执行的函数、

componentWillUnmount 组件销毁执行时函数

const [count, setCount] = useState(0);useEffect(() => {console.log('xxx') // 表示你要执行的动作
}, [count]); // 表示在count的值发生变化的时候，useEffect中的方法再执行一次，类似componentDidUpdate函数

useEffect是一个方法，其中有两个参数，一个是一个方法，表示你要执行的动作，另一个是依赖项，表示什么时候更新。

如果useEffect中第二个参数不填，表示只在组件第一次渲染的时候执行，类似于componentDidMount函数

  useEffect(() => {const timer = setInterval(() => {// do something}, 1000);// 表示在组件销毁的时候执行清楚定时器的动作，类似于componentWillUnmount函数return () => clearInterval(timer);}, []);

useEffect 的第二个参数，有三种情况

1、什么都不传，组件每次 render 之后 useEffect 都会调用，相当于 componentDidMount 和 componentDidUpdate
2、传入一个空数组 [], 只会调用一次，相当于 componentDidMount 和 componentWillUnmount
3、传入一个数组，其中包括变量，只有这些变量任意一个变动时，useEffect 才会执行

useMemo（主要针对当前组件中使用函数，优化性能）

useEffect和组件的生命周期有关，但useMemo跟生命周期不挂钩。

useMemo 是性能优化的手段，类似于类组件中的 shouldComponentUpdate，在子组件中使用 shouldComponentUpdate，判定该组件的 props 和 state 是否有变化，从而避免每次父组件render时都去重新渲染子组件。

const [ count, setCount ] = useState(0)
const add = useMemo(() => count + 1 , [count])<div>点击次数: { count }<br/>次数加一: { add }<br/><button onClick={() => { setCount(count + 1)}}>点我</button>
</div>