React 18 完全教程

第一章：React 18 基础概念

1.1 React 18 是什么？

React 18 是一个用于构建用户界面的JavaScript库。它采用组件化开发方式，提供了更好的并发渲染能力和性能优化。

练习 1.1：基本计数器应用

创建一个简单的计数器应用。

App.jsx

import { useState } from 'react'

function App() {
    const [count, setCount] = useState(0)
    const doubleCount = count * 2

    return (
        <div>
            <h2>计数器: {count}</h2>
            <p>双倍计数: {doubleCount}</p>
            <button onClick={() => setCount(count + 1)}>增加</button>
            <button onClick={() => setCount(count - 1)}>减少</button>
        </div>
    )
}

export default App
                

index.js

import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'

const root = createRoot(document.getElementById('root'))
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
)
                

第二章：核心概念

2.1 Hooks

React 18 提供了多种内置Hooks。

练习 2.1：常用Hooks

展示常用Hooks的使用方式。

Hooks示例

import { useState, useEffect, useRef, useMemo, useCallback } from 'react'

function Example() {
    // useState
    const [count, setCount] = useState(0)
    const [data, setData] = useState([])

    // useEffect
    useEffect(() => {
        console.log('组件挂载或更新')
        return () => {
            console.log('组件卸载')
        }
    }, [count])

    // useRef
    const inputRef = useRef(null)

    // useMemo
    const doubleCount = useMemo(() => count * 2, [count])

    // useCallback
    const handleClick = useCallback(() => {
        setCount(count + 1)
    }, [count])

    return (
        <div>
            <input ref={inputRef} />
            <p>Count: {count}</p>
            <p>Double Count: {doubleCount}</p>
            <button onClick={handleClick}>增加</button>
        </div>
    )
}
                

2.2 组件通信

React 18 的组件通信方式。

练习 2.2：组件通信示例

展示不同的组件通信方式。

组件通信示例

// 父组件
function Parent() {
    const [message, setMessage] = useState('Hello from parent')

    const handleUpdate = (newMessage) => {
        setMessage(newMessage)
    }

    return (
        <Child 
            message={message}
            onUpdate={handleUpdate}
        />
    )
}

// 子组件
function Child({ message, onUpdate }) {
    return (
        <div>
            <p>{message}</p>
            <button onClick={() => onUpdate('New message from child')}>
                更新消息
            </button>
        </div>
    )
}
                

2.3 Context API

Context API 用于跨组件共享数据。

练习 2.3：Context 示例

展示 Context 的使用。

Context 示例

import { createContext, useContext, useState } from 'react'

const ThemeContext = createContext()

function App() {
    const [theme, setTheme] = useState('light')

    return (
        <ThemeContext.Provider value={{ theme, setTheme }}>
            <Toolbar />
        </ThemeContext.Provider>
    )
}

function Toolbar() {
    return (
        <div>
            <ThemedButton />
        </div>
    )
}

function ThemedButton() {
    const { theme, setTheme } = useContext(ThemeContext)
    
    return (
        <button 
            onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
            style={{ background: theme === 'light' ? '#fff' : '#333' }}
        >
            切换主题
        </button>
    )
}
                

第三章：路由管理

3.1 React Router 6

React Router 6 是 React 18 的官方路由管理器。

练习 3.1：路由配置

配置基本路由。

路由配置示例

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'

function App() {
    return (
        <BrowserRouter>
            <nav>
                <Link to="/">首页</Link>
                <Link to="/about">关于</Link>
            </nav>
            
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
                <Route path="/users/:id" element={<User />} />
            </Routes>
        </BrowserRouter>
    )
}

function Home() {
    return <h2>首页</h2>
}

function About() {
    return <h2>关于</h2>
}

function User() {
    const { id } = useParams()
    return <h2>用户ID: {id}</h2>
}
                

第四章：状态管理

4.1 Redux Toolkit

Redux Toolkit 是 Redux 的官方工具集。

练习 4.1：Redux 配置

配置 Redux store。

Redux 配置示例

// store/counterSlice.js
import { createSlice } 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
export default counterSlice.reducer

// store/index.js
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './counterSlice'

export const store = configureStore({
    reducer: {
        counter: counterReducer
    }
})

// App.jsx
import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from './store/counterSlice'

function App() {
    const count = useSelector(state => state.counter.value)
    const dispatch = useDispatch()

    return (
        <div>
            <h2>Count: {count}</h2>
            <button onClick={() => dispatch(increment())}>增加</button>
            <button onClick={() => dispatch(decrement())}>减少</button>
        </div>
    )
}
                

第五章：性能优化

5.1 性能优化技巧

React 18 的性能优化技巧。

性能优化示例

// 1. 使用 React.memo 优化组件渲染
const MemoizedComponent = React.memo(function Component({ data }) {
    return <div>{data}</div>
})

// 2. 使用 useMemo 缓存计算结果
const expensiveValue = useMemo(() => {
    return computeExpensiveValue(a, b)
}, [a, b])

// 3. 使用 useCallback 缓存函数
const handleClick = useCallback(() => {
    doSomething(a, b)
}, [a, b])

// 4. 使用 React.lazy 实现组件懒加载
const LazyComponent = React.lazy(() => import('./LazyComponent'))

function App() {
    return (
        <Suspense fallback={<div>Loading...</div>}>
            <LazyComponent />
        </Suspense>
    )
}
            

5.2 并发特性

React 18 的并发特性。

并发特性示例

// 1. 使用 startTransition 标记非紧急更新
import { startTransition } from 'react'

function App() {
    const [input, setInput] = useState('')
    const [list, setList] = useState([])

    function handleChange(e) {
        setInput(e.target.value)
        startTransition(() => {
            setList(computeList(e.target.value))
        })
    }

    return (
        <div>
            <input value={input} onChange={handleChange} />
            <List items={list} />
        </div>
    )
}

// 2. 使用 useDeferredValue 延迟更新
import { useDeferredValue } from 'react'

function App() {
    const [query, setQuery] = useState('')
    const deferredQuery = useDeferredValue(query)

    return (
        <div>
            <input value={query} onChange={e => setQuery(e.target.value)} />
            <Results query={deferredQuery} />
        </div>
    )
}
            

第六章：常见问题解答

6.1 常见错误

列举并解决使用 React 18 时常见的错误。

常见错误及解决方案

// 错误1：直接修改状态
// ❌ 错误做法
const [items, setItems] = useState([])
items.push(newItem)

// ✅ 正确做法
const [items, setItems] = useState([])
setItems([...items, newItem])

// 错误2：在条件语句中使用Hooks
// ❌ 错误做法
if (condition) {
    const [count, setCount] = useState(0)
}

// ✅ 正确做法
const [count, setCount] = useState(0)
if (condition) {
    // 使用count
}

// 错误3：忘记添加依赖数组
// ❌ 错误做法
useEffect(() => {
    console.log(count)
})

// ✅ 正确做法
useEffect(() => {
    console.log(count)
}, [count])
            

6.2 调试技巧

介绍 React 18 的调试工具和技巧。

调试技巧示例

// 1. 使用 React Developer Tools
// 安装 React Developer Tools 浏览器扩展

// 2. 使用 console.log 调试
useEffect(() => {
    console.log('组件挂载')
    console.log('当前状态:', state)
}, [])

// 3. 使用 React.StrictMode 检测问题
<React.StrictMode>
    <App />
</React.StrictMode>

// 4. 使用 Error Boundary 捕获错误
class ErrorBoundary extends React.Component {
    componentDidCatch(error, errorInfo) {
        console.error('错误:', error)
        console.error('错误信息:', errorInfo)
    }
    
    render() {
        return this.props.children
    }
}
            