当前位置：首页 > news >正文

React 入门第一天：从Vue到React的初体验

news 2025/7/15 16:13:37

作为一名合格的前端工程师，怎么能只会Vue呢？学习React不仅是一场新技术的探索，更是对前端开发思维的一次重新审视。在这里，我将分享学习React的心得，希望能帮助那些和我一样从Vue转向React的开发者。

1. 为什么选择React？

在进入学习之前，先了解为什么选择React。React是由Facebook开发和维护的一个开源JavaScript库，用于构建用户界面。它最大的特点是组件化和单向数据流，以及引入了独特的JSX语法，这使得React成为了现代前端开发中的一颗明星。

2. 初识React：与Vue的对比

对于Vue开发者来说，React的入门其实并不难，因为它们在很多概念上是相通的。以下是React和Vue在几个关键点上的对比：

a. 组件化

Vue：组件是Vue的核心，使用模板（template）来定义组件的结构。
React：组件同样是核心，但使用的是JSX来编写组件，这是一种将HTML嵌入JavaScript中的语法。

b. 状态管理

Vue：组件状态通过data来管理，并通过双向绑定更新视图。
React：组件状态使用useState Hook（或类组件中的state）来管理，状态更新后通过重新渲染组件更新视图。

c. 生命周期

Vue：提供了丰富的生命周期钩子，如mounted、updated等。
React：通过useEffect Hook（或类组件中的生命周期方法）来处理副作用。

3. 第一个React组件

在了解了基本概念后，我们来动手写第一个React组件。假设我们要创建一个简单的计数器应用。

a. 创建项目

首先，我们可以使用Create React App脚手架快速创建一个React项目：

npx create-react-app my-first-react-app
cd my-first-react-app
npm start

项目创建完成后，你会看到一个初始的React应用页面。

b. 编写计数器组件

接下来，我们创建一个计数器组件：

import React, { useState } from 'react';function Counter() {// 定义一个名为count的状态变量，并初始化为0const [count, setCount] = useState(0);return (<div><h1>计数器：{count}</h1><button onClick={() => setCount(count + 1)}>增加</button></div>);
}export default Counter;

在这个简单的计数器中，我们使用了useState Hook来管理状态，并通过onClick事件处理器更新状态。这个过程与Vue非常相似，只是语法略有不同。

c. 将组件引入到应用中

最后，我们需要将这个组件引入到主应用中：

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './Counter'; // 引入计数器组件function App() {return (<div className="App"><Counter /></div>);
}ReactDOM.render(<App />, document.getElementById('root'));