React 入门必看：从安装配置到组件使用的全方位解析

小白学前端666

于 2024-12-15 23:29:52 发布

阅读量857

点赞数 24

文章标签： react.js 前端前端框架

本文链接：https://blog.youkuaiyun.com/sasa66697/article/details/144494584

版权

前言

React 是由 Facebook 开发的开源 JavaScript 库，用于构建用户界面。它通过组件化的方式，使得 UI 开发变得更高效、灵活且易于维护。在本文中，我们将带你从零开始了解 React，包括环境配置、安装、核心思想、关键语法、优缺点，以及与 Vue 的比较。

一、React 简介

1.1. 什么是 React

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架都不满意，便决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，便在 2013 年 5 月开源了。

React 是一个用于构建用户界面的 JavaScript 库，专注于 UI 部分，很多人认为 React 是 MVC 模式中的 V（视图）。React 具有较高的性能，代码逻辑简单，越来越多的人开始关注和使用它。

1.2. React 的特点

声明式编码
组件化编码
React Native 编写原生应用
高效（优秀的 Diffing 算法）
JSX 语法
单向数据绑定
虚拟 DOM

1.3. React 高效的原因

React 使用虚拟 DOM，而不是直接操作真实 DOM。通过 **DOM Diffing 算法**，React 能够最小化页面重绘，提高性能。

二、React 环境配置与安装

在开始编写 React 应用之前，我们需要先配置好开发环境。React 的开发环境可以通过三种方式搭建：使用 CDN 引入、通过 `create-react-app` 脚手架工具，或者使用现代构建工具 Vite。

2.1 使用 CDN 引入 React

对于初学者或者快速原型开发，可以通过 CDN 引入 React，而无需进行复杂的配置。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React Example</title>
</head>
<body>
  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  <div id="example"></div>
  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello, React!</h1>,
      document.getElementById('example')
    );
  </script>
</body>
</html>

2.2 使用 `create-react-app` 脚手架工具

create-react-app 是 React 官方提供的脚手架工具，可以帮助你快速创建一个 React 应用。它会自动配置 Webpack、Babel 等构建工具，适合初学者使用。

npm install -g create-react-app  # 安装 create-react-app
create-react-app my-app          # 创建一个新的 React 应用
cd my-app                        # 进入项目目录
npm start                        # 启动开发服务器

2.3 使用 Vite 快速搭建

Vite 是一个现代构建工具，因其快速的构建和开发体验受到前端开发者的青睐。与传统的 Webpack 配置不同，Vite 利用现代浏览器对 ES 模块的支持，能够大大提升开发效率。

# 使用 npm 创建一个新的 React 项目
npm create vite@latest my-app --template react
# 或者使用 Yarn
yarn create vite@latest my-app --template react
cd my-app
npm install
npm run dev

这种方法结合了 Vite 的快速启动和 React 的灵活性，非常适合快速开发现代化的前端应用。

三、React 的核心思想

React 的设计理念是组件化和声明式编程。组件化允许开发者将界面分解成小的、可复用的部分，而声明式编程则是通过描述“应用的状态”，来让 React 自动处理 UI 的更新。

3.1 组件化

在 React 中，应用的 UI 是由组件构成的。每个组件有自己的状态（state）和属性（props）。组件通过渲染自身来展示 UI。

// 函数组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(element, document.getElementById('root'));

组件可以嵌套使用，使得复杂的 UI 可以通过简单的组合来构建。

3.2 声明式编程

React 通过描述“状态”来更新界面，而不是直接操作 DOM。当状态发生变化时，React 会自动重新渲染需要更新的部分。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

React 会确保 count 的变化会自动更新到页面上，开发者无需手动操作 DOM 元素。

四、React 关键语法

4.1 JSX 语法

JSX（JavaScript XML）是 React 推荐使用的语法，它允许我们在 JavaScript 中写类似 HTML 的代码。实际上，JSX 会被 Babel 转换成 React.createElement 调用。

4.1.1 JSX 基本语法

JSX 中的元素必须被单一的父元素包裹：

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>Welcome to React.</p>
    </div>
  );
}

4.1.2 在 JSX 中使用表达式

在 JSX 中，我们可以通过 {} 来嵌入 JavaScript 表达式：

const name = 'React';
const element = <h1>Hello, {name}!</h1>;

4.1.3 元素属性

JSX 的属性和 HTML 属性相似，但有些不同。比如，class 在 JSX 中写成 className，for 写成 htmlFor。

function MyButton() {
  return <button className="btn">Click me</button>;
}

4.1.4 条件渲染

你可以在 JSX 中使用条件表达式来决定哪些内容会被渲染：

function Welcome(props) {
  if (props.isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign up.</h1>;
  }
}

4.2 组件

React 组件是 UI 的基本构建块，组件可以是函数组件或类组件。

4.2.1 函数组件

函数组件是 React 中推荐的组件类型，简洁且易于理解。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

4.2.2 类组件

类组件较为传统，适用于需要使用生命周期方法的情况。

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

4.3 状态管理 (State)

React 的状态（state）决定了组件的数据。通过 useState Hook 或者类组件中的 this.state 来管理。

4.3.1 函数组件中的 `useState`

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

4.3.2 类组件中的 `this.state`

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>Click me</button>
      </div>
    );
  }
}

4.4 生命周期方法

React 组件有多个生命周期方法，用于处理组件的不同阶段，如挂载、更新和卸载。

函数组件通过 useEffect Hook 来处理副作用（例如，API 请求、

事件监听等）。

import React, { useEffect, useState } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);

    return () => clearInterval(interval); // 清理定时器
  }, []);

  return <p>Time: {seconds} seconds</p>;
}