16. useEffect中的坑以及利用useRef记录之前的状态
1. 场景描述
用法在使用useEffect这个hooks的时候,我们通过会通过给他增加一个依赖项,来完成当某个或某些依赖发生改变的时候,完成一些副作用的操作,其正常用法如下:
import React, { useEffect, useState } from "react";
import "./styles.css";
const Profile = () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("Number is added!");
}, [count]);
return (
<>
<p>Current weight: {count}</p>
<button onClick={() => setCount(count+1)}>+1</button>
</>
);
};
export default Profile;
但是,当应用场景逐渐复杂之后,我们发现这么两个问题:
- 当依赖项为引用类型的变量时(数组),不管依赖向是否变化,useEffect都会重新执行
- 依赖项中,有多个变量时,一个变动,整个useEffect就会重新执行
问题一分析:
import React, {
useEffect, useRef } from "react";
import "./styles.css";
const Profile = () => {
const [user, setUser] = React.useState({
name: "Alex", weight: 40 });
React.useEffect(() => {
console.log("You need to do exercise!");
}, [user]);