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

React 前端框架入门

article 2024/12/25 15:06:06

这里写目录标题

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

React 前端框架入门

什么是 React？

React 是由 Facebook 开发并开源的一个用于构建用户界面的 JavaScript 库。
它的核心特点是组件化和响应式更新，适用于单页应用 (SPA) 和复杂前端界面的开发。

核心特性

组件化开发
- UI 被拆分为独立、可复用的组件。
- 每个组件有自己的状态和生命周期。
声明式编程
- 使用简单的代码描述 UI。
- React 会根据状态更新自动处理 DOM 变更。
虚拟 DOM
- 提高性能：通过比较虚拟 DOM 和真实 DOM 的差异，只更新必要的部分。
单向数据流
- 数据从父组件流向子组件，便于管理。
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       # 项目依赖和配置