学习React：从Vue到React的转变

最新推荐文章于 2024-06-18 13:58:34 发布

小杨很困1

最新推荐文章于 2024-06-18 13:58:34 发布

阅读量678

点赞数

文章标签： vue.js 学习 react.js javascript 前端前端框架

本文链接：https://blog.csdn.net/qq_43402218/article/details/131463485

版权

学习React：从Vue到React的转变

我在前端行业工作已经有3年的经验了，一直以来主要使用的是Vue全家桶和UniApp进行开发。然而最近我加入了一家新公司，他们的主要技术栈是React。这篇文章旨在记录我在学习和使用React的过程中的感受和经历。

过去的经验

在使用Vue全家桶和UniApp的过程中，我已经习惯了Vue的开发方式和生态系统。Vue的简洁语法、响应式数据绑定以及组件化开发让我非常喜欢。我熟悉Vue Router进行路由管理，使用Vuex进行状态管理，也掌握了Vue的单文件组件开发模式。

比如用vue实现一个简单的计数器

<template>
    <div>
        <p>Count: {{ count }}</p>
        <button @click="increment">Increment</button>
</div>
</template>

<script>
    export default {
    data() {
    return {
    count: 0,
};
},
    methods: {
    increment() {
    this.count++;
},
},
};
</script>

在Vue中，使用的是模板语法编写组件的结构，并在JavaScript部分定义数据和方法。上述代码中，
通过data选项定义了一个count变量，并在increment方法中实现了计数器的逻辑。

接触React

在加入新公司后，我迅速意识到学习React对我来说是一个必要的挑战。尽管React和Vue在某些方面有相似之处，
但它们的设计理念和工作方式有很大的差异。我开始积极主动地学习React，探索其核心概念和开发模式。

JSX和组件

React的JSX语法是我最先接触到的新概念。它将JavaScript和HTML结合在一起，让我可以在组件中编写类似于HTML的代码。一开始，
我觉得有点不习惯，因为我习惯了Vue的模板语法。但是随着时间的推移，我逐渐体会到JSX的强大之处。
它提供了更高的灵活性和可读性，让我可以在组件中直接编写JavaScript逻辑。

另一个令我印象深刻的是React的组件化开发方式。在Vue中，组件化是核心概念之一，而在React中，组件更加强调可重用性和独立性。
通过组件的组合和嵌套，我可以构建复杂的UI界面，并将它们拆分成可维护和可测试的部分。这种组件化的思维方式让我在React中感到非常舒适。

比如使用React用JSX语法来描述组件的结构和逻辑。以下是使用React实现相同计数器功能的代码示例：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

在React中，我们使用函数组件的形式，通过useState钩子来定义状态。上述代码中，useState返回一个包含两个值的数组，
第一个值是状态变量count，第二个值是更新状态的函数setCount。我们使用increment函数来更新计数器的值，并通过JSX语法构建组件的结构。

状态管理

在Vue中，我使用Vuex进行状态管理，它提供了一个集中式的存储管理方案。而在React中，我发现有多种状态管理方案可供选择。
Redux是其中最受欢迎的方案之一，但我也了解到了其他的替代方案，如Mobx和React Context。这使我意识到在React中，没有一种固定的方式来处理
状态管理，而是根据项目的需求和复杂性选择适合的解决方案