从Vue到React快速上手

        作为公司新来的java实习生，虽然写的是后端，但要背负一些前端的任务。因为前端使用的是React框架，本人也只会Vue2,Vue3略知一二。在进一步学习中React中发现，这不和Vue3差不多吗，现在有点后悔当初没有直接学到Vue3😭😭😭。

        现在分享一下，我从Vue2快速转到React的一些小心得😥。下面是中文的官方文档，下面我会结合文档快速入门一下。

        React用于构建 Web 和原生交互界面的库https://zh-hans.react.dev/

        React使用State 变量 用于保存渲染间的数据。首先我们要知道这个前端小基础，

       在React中，渲染指的是将组件的输出内容呈现到浏览器中的过程。当React组件被渲染时，它会生成一个虚拟DOM（Virtual DOM）表示组件的结构和内容。然后，React会将虚拟DOM与实际的DOM进行比较，并将差异部分更新到实际的DOM中，以反映组件的最新状态。

       渲染过程通常由React的渲染引擎自动处理，但也可以通过调用ReactDOM.render()方法手动触发渲染。当组件的状态或属性发生变化时，React会自动重新渲染组件，并更新相应的DOM元素。

       React使用一种称为"声明式"的方式来进行渲染。这意味着您只需要定义组件的结构和内容，而不需要手动操作DOM。

       接下来我们可以拿这个和Vue中的MVVM模型做类比，现在Vue实例中的data有一个test属性，当我通过某一个事件将test的值改变时，MVVM模型会将视图渲染，这时页面中<p>{{test}}<p>标签中的test会改变为新的值。

    

        从正常的逻辑出发，这个图片img会根据index，切换到指定下标的img。但是现在视图层并没有更新。如果我们在Vue中将index写到data里，在调用按钮时，data++，可以轻松的实现轮播图的效果，但是现在不行👌

      既然这样，React又是如何来实现Vue中这一系列的数据绑定和视图渲染呢？

React引入了State变量去保存data数据，而userState提供了这两个功能：

1. State 变量 用于保存渲染间的数据。
2. State setter 函数 更新变量并触发 React 再次渲染组件

 

这里按照Vue的写法，我们可以这样

// 创建Vue实例
const app = new Vue({
  // 设置默认的data属性
  data() {
    return {
      phyData: [],
      senData: [],
      recordData: [],
    };
  },
  // 其他配置项
  // ...
});

        相当于在创建Vue实例时我们给实例的data中创建了几个默认值为[]的数据~，那我们要去改变phyData时，直接 phyData = ...res.data ，大功告成。MVVM模型也会在绑定的数据发生变化时去重新渲染整个视图层。

        那现在在React怎么办呢？我们可以 setPhyData = （ ...res.data ），重点来了，你只有调用了set方法的时候，React才会去将setPhyData中的值传递给phyData并重新渲染视图。不然你直接phyData = ...res.data 去展示数据在react中等于白干！！！

        有人说在Vue的生命周期中的各个阶段，按照需求去调用各个方法很方便。那么现在React中怎么办呢？

       现在我们引入Effect 同步这个概念，在导入时叫useEffect。在React中他也会比较灵活。

         在 Vue 中，useEffect 这样的功能对应的是 mounted 生命周期。useEffect hook 是 React 中的概念，在每次组件渲染后执行相关的副作用代码。而 Vue 中的 mounted 生命周期钩子函数也是在组件渲染完成后被调用，可以进行 DOM 操作或与外部库交互，因此可以将相应的逻辑放在 mounted 阶段中。

上图中展示了三种使用方法，现在我们去类比Vue实例中的使用。

第一种（不常用）

        一般情况不会每次渲染都去调用，不然每次set的时候这里面执行的次数要上天了。

第二种（常用）   

在 Vue 中，useEffect(() => { /* ... */ }, []) 可以类比为使用 mounted 钩子函数，该钩子函数只会在组件初次挂载到 DOM 后执行一次。

在 Vue 组件中，可以通过以下方式定义 mounted 钩子函数：
export default {
  mounted() {
    // 在这里执行代码，只会在组件初次挂载时被调用
  }
}
与 React 的 useEffect(() => { /* ... */ }, []) 相似，Vue 的 mounted 钩子函数在组件挂载到 DOM 上后仅执行一次。它适合用于执行只需要在组件初始化时运行的代码或发送初始请求等操作。

        通常在Vue中，我们会在created生命周期钩子函数中去调用一些方法从后端获取一些数据，这些方法执行都在视图层渲染之前。而created在实例创建完成后被调用，此时已完成数据观测和事件配置，但尚未挂载到 DOM 上。后续在视图渲染可以将获取的数据渲染出来。

        所以我们使用第二种方法，可以完成一样的效果，一些在页面初始化时需要获取数据的方法可以写到这个地方，完成数据初始化和渲染的操作。

第三种（常用）

在 Vue 中，useEffect(() => { /* ... */ }, [a, b]) 可以类比为使用 watch 监听属性变化的情况。

在 Vue 组件中，可以通过 watch 选项或使用计算属性来实现类似的效果。当依赖的数据发生变化时，对应的操作或逻辑将会执行。

使用 watch 选项的示例代码如下：
export default {
  watch: {
    a(newVal, oldVal) {
      // 在 a 的值发生变化时执行相关操作
    },
    b(newVal, oldVal) {
      // 在 b 的值发生变化时执行相关操作
    }
  }
}
使用计算属性的示例代码如下：

javascript
export default {
  computed: {
    combinedValue() {
      // 根据 a 和 b 计算出一个新的值
      // 这个计算属性在依赖的 a 或 b 的值发生变化时自动更新
      // 可以在这里执行相关操作
    }
  }
}
以上代码示例都展示了在依赖的属性变化时执行相应的操作或逻辑。这相当于 React 中的 useEffect 钩子函数的第二个参数，只有在依赖的属性值与上次渲染不一致时才会执行。

知道了state和effect的概念，我们已经了解前端数据是如何进行临时存储，在页面中渲染，及在页面中如何被监听，还有在什么时候去调用适当的方法。基本上可以从Vue中很快转到React完成常用页面的开发。

今天到这里，又摸鱼了一天😋