2. 首页 > IT综合教程 > 正文

it教程FG132-React基础

教程整理：风哥教程  |  更新时间：2026-01-27  |  教程分类：IT综合教程  |  文档学习：5

1. React概述

React是由Facebook开发的一个用于构建用户界面的JavaScript库，它允许开发者创建大型的、数据驱动的单页应用。React的核心思想是组件化开发，将用户界面拆分为独立的、可复用的组件。更多学习教程www.fgedu.net.cn

React的主要特点包括：

  • 组件化：将UI拆分为独立的、可复用的组件
  • 虚拟DOM：通过虚拟DOM提高渲染性能
  • 单向数据流：数据从父组件流向子组件
  • JSX语法：允许在JavaScript中编写HTML-like代码
  • 声明式编程：描述UI应该是什么样子，而不是如何实现

2. React环境搭建

搭建React开发环境的方法有多种，最常用的是使用Create React App工具。

# 使用Create React App创建项目
# 安装Create React App（如果尚未安装）
npm install -g create-react-app

# 创建新的React项目
create-react-app my-react-app

# 进入项目目录
cd my-react-app

# 启动开发服务器
npm start

# 构建生产版本
npm run build

# 使用Vite创建React项目
# 安装create-vite（如果尚未安装）
npm install -g create-vite

# 创建新的React项目
npm create vite@latest my-react-app — –template react

# 进入项目目录
cd my-react-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

3. React组件

React组件是构建React应用的基本单位，分为函数组件和类组件两种类型。学习交流加群风哥微信: itpux-com

3.1 函数组件

// 函数组件
import React from ‘react’;

function Greeting() {
return

Hello, React!

;
}

export default Greeting;

3.2 类组件

// 类组件
import React, { Component } from ‘react’;

class Greeting extends Component {
render() {
return

Hello, React!

;
}
}

export default Greeting;

3.3 JSX语法

// JSX语法示例
import React from ‘react’;

function App() {
const name = ‘React’;
const isLoggedIn = true;

return (

Hello, {name}!

{isLoggedIn ? (

Welcome back!

) : (

Please log in.

)}

    {[1, 2, 3].map((number) => (

  • {number}

    • ))}

);
}

export default App;

4. 组件属性（Props）

Props是组件的输入，允许父组件向子组件传递数据。

// 父组件
import React from ‘react’;
import ChildComponent from ‘./ChildComponent’;

function ParentComponent() {
return (

);
}

export default ParentComponent;

// 子组件
import React from ‘react’;

function ChildComponent(props) {
return (

Name: {props.name}

Age: {props.age}

);
}

export default ChildComponent;

// 使用解构赋值
import React from ‘react’;

function ChildComponent({ name, age }) {
return (

Name: {name}

Age: {age}

);
}

export default ChildComponent;

5. 组件状态（State）

State是组件的内部数据，用于管理组件的动态变化。

5.1 类组件中的State

import React, { Component } from ‘react’;

class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}

increment() {
this.setState({ count: this.state.count + 1 });
}

render() {
return (

Count: {this.state.count}

);
}
}

export default Counter;

5.2 函数组件中的State（使用Hooks）

import React, { useState } from ‘react’;

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

const increment = () => {
setCount(count + 1);
};

return (

Count: {count}

);
}

export default Counter;

风哥风哥提示：在React中，State应该是不可变的，每次更新State时都应该创建一个新的对象或数组，而不是直接修改原有的State。

6. 事件处理

React中的事件处理与DOM事件类似，但有一些语法上的差异。学习交流加群风哥QQ113257174

// 事件处理示例
import React, { useState } from ‘react’;

function EventExample() {
const [inputValue, setInputValue] = useState(”);
const [message, setMessage] = useState(”);

const handleInputChange = (e) => {
setInputValue(e.target.value);
};

const handleSubmit = (e) => {
e.preventDefault();
setMessage(`Hello, ${inputValue}!`);
setInputValue(”);
};

return (



{message}

);
}

export default EventExample;

7. 组件生命周期

类组件有完整的生命周期方法，而函数组件可以使用Hooks来模拟生命周期行为。

7.1 类组件生命周期方法

import React, { Component } from ‘react’;

class LifecycleExample extends Component {
// 组件初始化
constructor(props) {
super(props);
this.state = { count: 0 };
console.log(‘Constructor’);
}

// 组件挂载后
componentDidMount() {
console.log(‘Component Did Mount’);
// 可以在这里进行API调用、设置定时器等
}

// 组件更新前
componentDidUpdate(prevProps, prevState) {
console.log(‘Component Did Update’);
// 可以在这里比较prevProps和this.props，prevState和this.state
}

// 组件卸载前
componentWillUnmount() {
console.log(‘Component Will Unmount’);
// 可以在这里清理定时器、取消订阅等
}

increment() {
this.setState({ count: this.state.count + 1 });
}

render() {
console.log(‘Render’);
return (

Count: {this.state.count}

);
}
}

export default LifecycleExample;

7.2 函数组件中的生命周期（使用Hooks）

import React, { useState, useEffect } from ‘react’;

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

// 相当于componentDidMount和componentDidUpdate
useEffect(() => {
console.log(‘Component Did Mount/Update’);

// 清理函数，相当于componentWillUnmount
return () => {
console.log(‘Component Will Unmount’);
};
}, [count]); // 依赖项数组，只有当count变化时才会执行

const increment = () => {
setCount(count + 1);
};

return (

Count: {count}

);
}

export default LifecycleExample;

8. React Hooks

Hooks是React 16.8引入的新特性，允许函数组件使用状态和其他React特性。

8.1 常用Hooks

// useState：用于管理组件状态
import React, { useState } from ‘react’;

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

Count: {count}

);
}

// useEffect：用于处理副作用
import React, { useState, useEffect } from ‘react’;

function DataFetching() {
const [data, setData] = useState(null);

useEffect(() => {
fetch(‘https://api.fgedu.net.cn/data’)
.then(response => response.json())
.then(data => setData(data));
}, []); // 空依赖数组，只执行一次

return (

{data ?

{data.message}

:

Loading…

}

);
}

// useContext：用于访问上下文
import React, { useContext } from ‘react’;
import { ThemeContext } from ‘./ThemeContext’;

function ThemedButton() {
const theme = useContext(ThemeContext);
return (

);
}

// useReducer：用于复杂状态管理
import React, { useReducer } from ‘react’;

function reducer(state, action) {
switch (action.type) {
case ‘increment’:
return { count: state.count + 1 };
case ‘decrement’:
return { count: state.count – 1 };
default:
return state;
}
}

function Counter() {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (

Count: {state.count}


);
}

9. React路由

React Router是React的官方路由库，用于实现单页应用的路由功能。

# 安装React Router
npm install react-router-dom
// 基本路由配置
import React from ‘react’;
import { BrowserRouter as Router, Route, Switch, Link } from ‘react-router-dom’;
import Home from ‘./Home’;
import About from ‘./About’;
import Contact from ‘./Contact’;

function App() {
return (


);
}

export default App;

// 带参数的路由
import React from ‘react’;
import { BrowserRouter as Router, Route, Link, useParams } from ‘react-router-dom’;

function User() {
const { id } = useParams();
return

User ID: {id}

;
}

function App() {
return (


);
}

export default App;

10. React最佳实践

遵循React最佳实践可以提高代码质量和可维护性。更多学习教程公众号风哥教程itpux_com

10.1 组件设计

  • 保持组件小而专注，每个组件只负责一个功能
  • 使用函数组件和Hooks，它们更简洁、更易于理解
  • 合理使用Props和State，避免不必要的状态管理
  • 使用PropTypes或TypeScript进行类型检查

10.2 性能优化

// 使用React.memo避免不必要的渲染
import React, { memo } from ‘react’;

const ExpensiveComponent = memo(({ data }) => {
console.log(‘Rendering ExpensiveComponent’);
// 复杂的计算
return

{data}

;
});

// 使用useMemo缓存计算结果
import React, { useMemo } from ‘react’;

function CalculateComponent({ a, b }) {
const result = useMemo(() => {
console.log(‘Calculating…’);
// 复杂的计算
return a + b;
}, [a, b]); // 只有当a或b变化时才重新计算

return

Result: {result}

;
}

// 使用useCallback缓存函数
import React, { useCallback } from ‘react’;

function ButtonComponent({ onClick }) {
return ;
}

function ParentComponent() {
const handleClick = useCallback(() => {
console.log(‘Button clicked’);
}, []); // 空依赖数组，函数只创建一次

return ;
}

10.3 代码组织

  • 按功能或特性组织文件结构
  • 使用文件夹来组织相关组件
  • 将逻辑与UI分离，使用自定义Hooks封装逻辑
  • 使用索引文件（index.js）来简化导入

10.4 状态管理

  • 对于简单状态，使用useState
  • 对于复杂状态，使用useReducer
  • 对于跨组件状态，使用Context API
  • 对于大型应用，考虑使用Redux、MobX等状态管理库
生产环境风哥建议：在生产环境中，建议使用ESLint和Prettier来保持代码风格一致，使用Jest和React Testing Library进行测试，使用Webpack或Vite进行构建优化。同时，要注意代码分割和懒加载，以提高应用的加载速度和性能。

React是一个强大的前端库，通过组件化开发和虚拟DOM等特性，使得构建复杂的用户界面变得更加简单和高效。掌握React的基础知识，结合现代前端工具和最佳实践，可以创建出高质量、性能优异的前端应用。author:www.itpux.com

本文由风哥教程整理发布,仅用于学习测试使用,转载注明出处:http://www.fgedu.net.cn/10327.html

相关推荐

联系我们

在线咨询：点击这里给我发消息

微信号：itpux-com

工作日：9:30-18:30，节假日休息