React 前端框架入门

这里写目录标题

• [React 前端框架入门](#React 前端框架入门)
• • [什么是 React？](#什么是 React？)
  • 核心特性
  • 基本概念
  • • [1. JSX](#1. JSX)
    • [2. 组件](#2. 组件)
    • [3. State 和 Props](#3. State 和 Props)
    • [4. 生命周期](#4. 生命周期)
    • [5. React Hooks](#5. React Hooks)
  • [React 应用示例](#React 应用示例)
  • 项目结构
  • [如何启动 React 项目](#如何启动 React 项目)
  • 参考资料

React 前端框架入门

什么是 React？

React 是由 Facebook 开发并开源的一个用于构建用户界面的 JavaScript 库 。

它的核心特点是组件化和响应式更新，适用于单页应用 (SPA) 和复杂前端界面的开发。

核心特性

1. 组件化开发

   • UI 被拆分为独立、可复用的组件。
   • 每个组件有自己的状态和生命周期。

2. 声明式编程

   • 使用简单的代码描述 UI。
   • React 会根据状态更新自动处理 DOM 变更。

3. 虚拟 DOM

   • 提高性能：通过比较虚拟 DOM 和真实 DOM 的差异，只更新必要的部分。

4. 单向数据流

   • 数据从父组件流向子组件，便于管理。

5. React Hooks

   • 使函数组件也能拥有状态和生命周期特性。

基本概念

1. JSX

JSX 是一种在 JavaScript 中嵌入 HTML 的语法，类似模板语言。

const element = <h1>Hello, React!</h1>;

2. 组件

组件是 React 的基础单元，可以分为 函数组件 和 类组件。

• 函数组件

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

• 类组件

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

3. State 和 Props

• Props: 用于从父组件向子组件传递数据，组件是只读的。
• State: 每个组件的内部状态，可随事件或操作动态变化。

4. 生命周期

React 提供了一系列生命周期方法，用于控制组件的渲染和更新过程。

生命周期阶段	方法	描述
挂载	componentDidMount	初始化后运行，如数据请求。
更新	componentDidUpdate	状态或属性更新后运行。
卸载	componentWillUnmount	清理工作，如取消订阅。

5. React Hooks

Hooks 是函数组件的新特性，用于处理状态和生命周期。

• 使用 useState 管理状态

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>点击我</button>
    </div>
  );
}

• 使用 useEffect 管理副作用

import React, { useEffect } from "react";

function Example() {
  useEffect(() => {
    console.log("组件已挂载");
    return () => {
      console.log("组件已卸载");
    };
  }, []);
  return <div>Hello, Hooks!</div>;
}

React 应用示例

以下是一个简单的计数器应用：

import React, { useState } from "react";
import ReactDOM from "react-dom";

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

  return (
    <div>
      <h1>计数器</h1>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
      <button onClick={() => setCount(count - 1)}>减少</button>
    </div>
  );
}

ReactDOM.render(<Counter />, document.getElementById("root"));

项目结构

React 项目通常使用 Create React App 创建，其默认结构如下：

my-app/
├── src/
│   ├── App.js         # 主组件文件
│   ├── index.js       # 入口文件
│   ├── components/    # 自定义组件目录
│   └── styles/        # 样式文件
├── public/
│   └── index.html     # HTML 模板
├── package.json       # 项目依赖和配置

如何启动 React 项目

1. 安装 Node.js 和 npm。

2. 创建 React 项目：

   npx create-react-app my-app
   cd my-app

3. 启动项目：

   npm start

参考资料

• React 官方文档
• React 中文文档