Vue转React开发经验分享——hooks写法如何触发react生命周期、如何触发数据更新？

背景：习惯了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 变化时，重新执行 useEffectreturn (<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);
//需要立即使用最新countupdateOther(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
});

通常用展开运算符复用老数据，将需要修改的属性进行变更。