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

React 学习全阶段总结

article 2025/3/11 15:13:44

React 学习全阶段总结

基础入门

在刚开始学习 React 时，我们主要掌握了如何创建 React 项目、组件的基本概念以及状态管理。

创建项目：使用 create-react-app 工具可以快速搭建一个新的 React 项目。

npx create-react-app my-react-app
cd my-react-app
npm start

组件定义：组件是 React 应用的基本构建块，分为函数组件和类组件。

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

const HelloComponent = () => {
    return <p>Hello, React!</p>;
};

export default HelloComponent;

状态管理：使用 useState Hook 来管理组件的状态。

import React, { useState } from 'react';

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

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
};

export default Counter;

中级进阶

中级阶段我们深入学习了 React 的一些高级特性，如 Hooks 的高级用法、状态管理库的使用、路由和表单处理等。

高级 Hooks：除了 useState，还学习了 useEffect、useContext、useReducer 等 Hooks。

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

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

    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch('https://api.example.com/data');
            const json = await response.json();
            setData(json);
        };

        fetchData();
    }, []);

    return (
        <div>
            {data? <p>{data.message}</p> : <p>Loading...</p>}
        </div>
    );
};

export default DataFetching;

状态管理库：使用 Redux 或 MobX 来管理复杂的应用状态。

// Redux 示例
import { createSlice, configureStore } from '@reduxjs/toolkit';

const counterSlice = createSlice({
    name: 'counter',
    initialState: {
        value: 0
    },
    reducers: {
        increment: (state) => {
            state.value += 1;
        },
        decrement: (state) => {
            state.value -= 1;
        }
    }
});

export const { increment, decrement } = counterSlice.actions;

const store = configureStore({
    reducer: counterSlice.reducer
});

export default store;

路由：使用 React Router 来实现单页面应用的路由功能。

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
            </Routes>
        </Router>
    );
};

export default App;

高级拓展

高级阶段我们探索了 React 与其他技术的结合，如 WebGL、VR/AR、服务器端渲染（SSR）等。

React 与 WebGL：使用 three.js 库在 React 项目中创建 3D 场景。

import React, { useEffect, useRef } from 'react';
import * as THREE from 'three';

const ThreeScene = () => {
    const containerRef = useRef(null);

    useEffect(() => {
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        containerRef.current.appendChild(renderer.domElement);

        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        camera.position.z = 5;

        const animate = () => {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        };

        animate();

        return () => {
            containerRef.current.removeChild(renderer.domElement);
        };
    }, []);

    return (
        <div ref={containerRef} />
    );
};

export default ThreeScene;

服务器端渲染（SSR）：使用 Next.js 框架实现 SSR。

// pages/index.js
import React from 'react';

const HomePage = () => {
    return (
        <div>
            <h1>Welcome to my SSR React app!</h1>
        </div>
    );
};

export default HomePage;