开发公司起名大全_微信公众平台小程序入口_怎么下载有风险的软件_网站怎么建立

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 中文文档