it教程FG123-React基础

内容大纲

1. React简介
2. React安装
3. React基本概念
4. React组件
5. React状态管理
6. React属性传递
7. React生命周期
8. React最佳实践

1. React简介

React是一个由Facebook开发的JavaScript库，用于构建用户界面。它采用组件化开发方式，使得代码更加模块化、可复用和易于维护。React的主要特点包括：

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

React不仅可以用于构建Web应用，还可以通过React Native构建移动应用，是当前最流行的前端框架之一。更多学习教程www.fgedu.net.cn

2. React安装

2.1 使用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

2.2 使用Vite创建React项目

# 使用npm create vite@latest创建项目

npm create vite@latest my-react-app — –template react

# 进入项目目录

cd my-react-app

# 安装依赖

npm install

# 启动开发服务器

npm run dev

3. React基本概念

3.1 JSX语法

// JSX语法示例
import React from 'react';

function Hello() {
    return (
        
            Hello, React!
            Welcome to React development.
        
    );
}

export default Hello;

3.2 虚拟DOM

虚拟DOM是React的核心概念之一。它是一个JavaScript对象，用于描述真实DOM的结构。当组件状态发生变化时，React会先更新虚拟DOM，然后通过Diffing算法比较新旧虚拟DOM的差异，最后只更新真实DOM中发生变化的部分，从而提高渲染性能。

3.3 单向数据流

React采用单向数据流，数据从父组件通过props传递给子组件，子组件不能直接修改父组件的数据。如果子组件需要修改数据，需要通过回调函数通知父组件进行修改。这种模式使得数据流向更加清晰，便于调试和维护。

4. React组件

4.1 函数组件

// 函数组件示例
import React from 'react';

function Greeting({ name }) {
    return Hello, {name}!;
}

export default Greeting;

4.2 类组件

// 类组件示例
import React, { Component } from 'react';

class Greeting extends Component {
    render() {
        return Hello, {this.props.name}!;
    }
}

export default Greeting;

4.3 组件组合

// 组件组合示例
import React from 'react';
import Greeting from './Greeting';

function App() {
    return (
        
            
            
        
    );
}

export default App;

5. React状态管理

5.1 函数组件中的状态（useState）

// 使用useState Hook
import React, { useState } from 'react';

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

export default Counter;

5.2 类组件中的状态

// 类组件中的状态
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 });
    };
    
    decrement = () => {
        this.setState({ count: this.state.count - 1 });
    };
    
    render() {
        return (
            
                Count: {this.state.count}
                
                
            
        );
    }
}

export default Counter;

5.3 状态更新的注意事项

状态更新是异步的，不要依赖当前状态进行更新
对于复杂状态，使用函数式更新
状态应该是不可变的，不要直接修改状态

6. React属性传递

6.1 基本属性传递

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
    return (
        
    );
}

// 子组件
import React from 'react';

function ChildComponent(props) {
    return (
        
            Name: {props.name}
            Age: {props.age}
            Admin: {props.isAdmin ? 'Yes' : 'No'}
        
    );
}

export default ChildComponent;

6.2 解构赋值

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

function ChildComponent({ name, age, isAdmin }) {
    return (
        
            Name: {name}
            Age: {age}
            Admin: {isAdmin ? 'Yes' : 'No'}
        
    );
}

export default ChildComponent;

6.3 默认属性

// 设置默认属性
import React from 'react';

function ChildComponent({ name = 'Guest', age = 18, isAdmin = false }) {
    return (
        
            Name: {name}
            Age: {age}
            Admin: {isAdmin ? 'Yes' : 'No'}
        
    );
}

export default ChildComponent;

7. React生命周期

7.1 类组件生命周期

挂载阶段：constructor → componentDidMount
更新阶段：shouldComponentUpdate → componentDidUpdate
卸载阶段：componentWillUnmount

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');
        // 在这里可以处理更新后的逻辑
    }
    
    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 函数组件中的生命周期（useEffect）

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

function LifecycleExample() {
    const [count, setCount] = useState(0);
    
    // 相当于 componentDidMount 和 componentDidUpdate
    useEffect(() => {
        console.log('Effect ran');
        
        // 清理函数，相当于 componentWillUnmount
        return () => {
            console.log('Cleanup');
        };
    }, [count]); // 依赖数组，只有当count变化时才会重新运行
    
    return (
        
            Count: {count}
            
        
    );
}

export default LifecycleExample;

8. React最佳实践

生产环境建议

使用函数组件和Hooks，避免使用类组件
合理使用useState和useEffect，避免过度渲染
使用Context API或状态管理库（如Redux）管理全局状态
使用React.memo、useMemo和useCallback优化性能
组件拆分要合理，保持组件的单一职责
使用ESLint和Prettier保持代码质量
编写单元测试和集成测试
使用TypeScript提高代码可维护性
优化图片和资源加载
使用代码分割减少初始加载时间

风哥风哥提示：React的生态系统非常丰富，建议学习React Router、Redux等相关库，以构建更复杂的应用。

学习交流加群风哥微信: itpux-com

学习交流加群风哥QQ113257174

更多学习教程公众号风哥教程itpux_com

author:www.itpux.com

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