Vue 转 React 指南，看这篇文章就够了( 三 ) _React

这段话其实暴露了 Vuex 的一个缺陷，它和 Vue 强绑定，无法独立存在，这种一些项目升级和迁移时会有很大的麻烦。Redux 作为 React 的状态管理方案之一其实不依赖于 React 。
React 周边的状态管理方案特别多，如 Redux、Mobx、Recoil 等，各有各的亮点，其中使用最多的应该是 Redux 。

文章插图

Redux 周边生态也很丰富，可以更加下图选择不同的方案：

文章插图

redux-thunk
redux-promise
redux-saga
redux-observable

由于这部分代码较多，不详细写，不过如果你熟悉 Vuex 的概念，转到 Redux 应该不难。Vuex + axIOS 的做法和 Redux + redux-thunk 的写法类似，不过现在 redux-saga 的方案被更多复杂项目采用，其中很重要的原因是 saga 的概念编写异步代码非常优雅，且能够很好地解决静态问题（如果采用 Vuex + axios 的写法会异常复杂、冗长），高度定制。
如果你要迁移 Vue 到 React，建议采用的方案是 Redux + saga，saga 的概念不是那么容易懂，学习需要一些时间，但当你学会的时候就会明白这种写法比直接用 Promise 好太多了。
生命周期Vue 的生命周期这里不再重复，查询官方文档即可，React 生命周期如图：

文章插图

图片可以在这里找到。一般情况下 class 写法主要用到 componentDidMount 和 componentWillUnmount 钩子，React 的函数写法下可以用 useEffect 的执行函数和清理函数去模拟 mount 和 unmount 过程：

import React, { useRef, useEffect } from 'react';function Index() {const ref = useRef(null);useEffect(() => {console.log('mounted');return () => {console.log('will unmount');};}, []);return <input ref={ref}/>}export default Index;

useEffect 的原理这里不多说，可以看看