背景:习惯了vue的写法,并且vue2和vue3都比较熟悉,在转react开发中,不停的思考react和vue框架的相似之处,以及vue中的写法在react里怎么替换。本文将组件更新或组件生命周期角度出发聊聊如何使用hooks触发生命周期,以及如何触发数据更新
为什么要触发组件生命周期
很多没有经验的人不知道为什么要学习框架的生命周期。在开发中,我们经常需要弹窗和主页面进行数据传递,我现在就遇到很多组件通信的场景,主页面更新了,弹窗不能关闭,弹窗也要更新;又或者,弹窗更新了,立即更新外部页面,如tree的状态,视图更新等。这里先不考虑组件通信,之后在聊。先说组件如何触发更新。
组件什么时候更新?这里我们说的概念是主动触发更新。当你明确知道哪个数据变化了,一定要更新;或者执行了变更操作一定要更新我们就去触发更新。react的hook写法没有提供像vue这种onMounted,onUnMounted,watch等监控方法,同时它的数据必须通过组件更新才能重新渲染到视图。所以在用react开发的时候,更多的是在跟数据打交道,有时候莫名奇妙的数据变成undefined,或者数据更新了视图不更新。
useEffect
useEffect
是 React 中最常用的生命周期管理 Hook。它相当于类组件中的componentDidMount
、componentDidUpdate
和componentWillUnmount
的组合。
useEffect模拟组件挂载和卸载
最常用的就是useEffect方法,这个方法能干什么?首先,它接受两个参数,第一个参数放执行逻辑,第二个参数放依赖数组。同时第一个参数的函数返回支持一个return方法。这几项共同演绎了组件更新逻辑。首先,如何模拟组件挂载和卸载,比如弹窗如果封装为一个组件,那么弹窗打开是挂载,弹窗关闭是卸载。你如果只想让组件执行一次挂载和卸载逻辑,就将依赖项设置一个空数组。在第一个参数写组件挂载逻辑,在返回return里执行卸载,即清理工作。
示例如下
import React, { useEffect } from 'react';
function Example() {
useEffect(() => {
// 这里执行的代码在组件首次渲染后只执行一次
const interval = setInterval(() => {
console.log('Interval running');
}, 1000);
// 返回一个清理函数,用于在组件卸载时清除定时器
return () => {
clearInterval(interval);
console.log('Component unmounted');
};
}, []);
return (
<div>
{/* 组件内容 */}
</div>
);
}
Vue中的
onMounted
,可以在首次渲染后执行一些初始化操作。在React中,你可以通过useEffect
的依赖项为空来实现这一点;Vue中的
onUnmounted
,可以在组件卸载前执行一些清理操作;推荐使用useEffect
的返回值来实现更安全的组件卸载逻辑
useEffect模拟数据更新视图
在Vue中,组件的更新操作通常是由数据变化触发的,Vue会自动处理DOM的更新。而在React中,如果你想模拟Vue的组件更新操作,你可以使用
useState
和useEffect
钩子来手动控制组件的更新。通过useEffect设置依赖项,就可以在依赖项变化时触发其他数据的方法。比如删除数据后触发list刷新,保存数据后重新获取数据等。
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
// 组件更新时执行
console.log(`Count changed to ${count}`);
};
}, [count]); // 依赖数组,当 count 变化时,重新执行 useEffect
return (
<div>
<p>Count is: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}
如何触发数据更新
在vue中可以通过ref、reactive等方法直接定义响应式数据,数据变化视图自动更新。但是在react,数据需要手动管理,即哪些是需要视图跟着一起变化的数据需要手动维护。最常用的是useState钩子函数。这个函数通过解构重命名为[变量,变量的修改方法]。用法如下
useState
import React, { useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Increment</button>
</div>
);
}
setState后异步获取state不是最新的?
如果在一个组件生命周期内,先通过方法更改了state,但是紧跟着就使用state,会出现用的还是旧的state数据。这是因为state还没更新,setState是异步的,state会在下个组件生命周期更新。所以你会发现你想的数据总是”晚一步“。这点非常不好用!!!如何避免?
解决方法
1.更新state时,用一个额外的变量存当前最新的state,可以用useRef维护一个全局变量,直接使用全局变量就行了;也可以用一个局部变量,然后立即使用这个局部变量
useRef
useRef
是React提供的一个Hook,用于创建一个保持初始值的可变引用。你可以在组件的函数中使用它来存储当前的状态值。
import React, { useState, useRef } from 'react';
function MyComponent() {
// 使用useState创建状态
const [count, setCount] = useState(0);
// 使用useRef创建一个引用,用于存储当前的count值
const currentCount = useRef(count);
// 当count更新时,也更新当前的引用
React.useEffect(() => {
currentCount.current = count;
}, [count]);
return (
<div>
<p>当前计数:{currentCount.current}</p>
<button onClick={() => setCount(count => count + 1)}>
增加计数
</button>
</div>
);
}
export default MyComponent;
在函数组件中,你可以创建一个局部变量并立即使用它来存储当前的状态值。这样,你可以立即使用这个局部变量,而不用担心状态的延迟更新问题。
import React, { useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
// 创建一个局部变量来存储当前的count值
const update=()=>{
const new = count+1;
setCount(new);
//需要立即使用最新count
updateOther(new);
}
const updateOther =(count:number)=>{
//巴拉巴拉
}
return (
<div>
<p>当前计数:{currentCount}</p>
<button onClick={update}>
增加计数
</button>
</div>
);
}
export default MyComponent;
setState更新对象不成功?
在React中,当使用setState
更新对象时,如果直接修改状态对象,可能会导致原始数据丢失。这是因为React的setState
函数在内部使用的是不可变数据结构,它会合并新的状态而不是替换整个对象。
以下是一个可能导致原始数据丢失的例子:
setState({
age: prevState.userInfo.age + 1
});
在这个例子中,你首先获取了prevState.userInfo
,然后直接在同一个对象上修改了age
属性。这样做不会创建一个新的对象,因此React不会检测到状态的变化,所以界面不会更新。
解决方法
为了避免这种情况,你应该始终创建一个新的状态对象,如下所示:
setState({
...prevState.userInfo,
age: prevState.userInfo.age + 1
});
通常用展开运算符复用老数据,将需要修改的属性进行变更。