大白话React第八章React 深入进阶与实践拓展阶段

时间：2025-03-03 06:59:07

大白话React第八章React 深入进阶与实践拓展阶段

1. React 生态系统的深入探索

React 有很多好用的库和工具，就像一个大的工具商店，里面有各种各样能帮我们把应用做得更好的宝贝。

  • 状态管理库的对比与选择：除了 Redux 和 Redux Toolkit，还有 MobX 等状态管理库。MobX 就像一个更灵活的小助手，它通过响应式编程的方式来管理状态，使用起来相对简洁。
import React from'react';
import { observable, action } from'mobx';
import { observer } from'mobx-react';

class CounterStore {
    // 定义可观察的状态
    @observable count = 0;

    // 定义修改状态的动作
    @action increment = () => {
        this.count++;
    };

    @action decrement = () => {
        this.count--;
    };
}

const counterStore = new CounterStore();

const Counter = observer(() => {
    return (
        <div>
            <p>当前计数: {counterStore.count}</p>
            <button onClick={counterStore.increment}>增加</button>
            <button onClick={counterStore.decrement}>减少</button>
        </div>
    );
});

export default Counter;

在这个例子中，使用 MobX 的 observable 定义可观察的状态，action 定义修改状态的方法，observer 函数让组件能够响应状态的变化。

  • UI 组件库的使用：比如 Ant Design of React、Material-UI 等。这些组件库就像一套精美的装修模板，里面有各种现成的按钮、表格、表单等组件，我们可以直接用它们来让应用的界面更美观、更专业。
import React from'react';
import Button from 'antd/lib/button';
import 'antd/dist/antd.css';

const App = () => {
    return (
        <div>
            <Button type="primary">这是一个 Ant Design 的按钮</Button>
        </div>
    );
};

export default App;

这里引入了 Ant Design 的按钮组件，只需要简单配置就能使用，并且样式也很美观。

2. 性能优化的进阶之路

让应用跑得更快、更流畅是我们一直追求的目标，就像让一辆车跑得又快又稳一样。

  • 使用 React.memo、useCallback 和 useMemo 优化：React.memo 可以防止函数组件不必要的重新渲染，useCallback 用来记住函数，避免每次渲染都创建新的函数，useMemo 则用来记住计算结果，避免重复计算。
import React, { useState, useCallback, useMemo } from'react';

const ExpensiveCalculation = (props) => {
    console.log('进行昂贵的计算');
    return props.value * 2;
};

const App = () => {
    const [count, setCount] = useState(0);
    const [toggle, setToggle] = useState(false);

    // 使用 useCallback 记住函数
    const handleIncrement = useCallback(() => {
        setCount(count + 1);
    }, [count]);

    // 使用 useMemo 记住计算结果
    const result = useMemo(() => {
        return <ExpensiveCalculation value={count} />;
    }, [count]);

    return (
        <div>
            <p>计数: {count}</p>
            <button onClick={handleIncrement}>增加计数</button>
            <p>{toggle? '显示' : '隐藏'}</p>
            <button onClick={() => setToggle(!toggle)}>切换显示</button>
            {result}
        </div>
    );
};

export default App;

在这个例子中，handleIncrement 函数使用 useCallback 避免了不必要的函数创建，result 使用 useMemo 避免了 ExpensiveCalculation 组件在 toggle 变化时的重复计算。

3. 跨端开发与 React 同构

现在我们不仅要让应用在网页上能用，还要能在手机、平板等不同设备上使用，这就是跨端开发。

  • React Native 深入开发：除了简单的界面展示，我们还可以开发更复杂的功能，比如调用手机的摄像头、获取地理位置等。
import React, { useState, useEffect } from'react';
import { StyleSheet, Text, View, Button, Image } from'react-native';
import { PermissionsAndroid } from'react-native';
import Camera from'react-native-camera';

const App = () => {
    const [hasPermission, setHasPermission] = useState(null);
    const [image, setImage] = useState(null);

    useEffect(() => {
        (async () => {
            const permission = await PermissionsAndroid.request(
                PermissionsAndroid.PERMISSIONS.CAMERA,
                {
                    title: '摄像头权限',
                    message: '我们需要访问你的摄像头'
                }
            );
            if (permission === PermissionsAndroid.RESULTS.GRANTED) {
                setHasPermission(true);
            } else {
                setHasPermission(false);
            }
        })();
    }, []);

    const takePicture = async () => {
        if (hasPermission) {
            const options = { quality: 0.5, base64: true };
            const data = await camera.takePictureAsync(options);
            setImage(data.uri);
        }
    };

    let camera;
    return (
        <View style={styles.container}>
            {hasPermission === null? (
                <Text>正在请求摄像头权限...</Text>
            ) : hasPermission === false? (
                <Text>没有摄像头权限</Text>
            ) : (
                <View>
                    <Camera
                        ref={(ref) => {
                            camera = ref;
                        }}
                        style={styles.preview}
                    />
                    <Button title="拍照" onPress={takePicture} />
                    {image && <Image source={{ uri: image }} style={styles.preview} />}
                </View>
            )}
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center'
    },
    preview: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center'
    }
});

export default App;

这个例子展示了在 React Native 中请求摄像头权限并拍照的功能。

  • React 同构（SSR/SSG）：SSR（服务器端渲染）和 SSG（静态站点生成）就像是在不同的地方提前把应用准备好。SSR 是在服务器上把页面渲染好再发给用户，这样用户能更快看到内容；SSG 是在构建时就把页面生成好，适合一些内容不经常变化的网站。

以 Next.js（用于 React 的 SSR 和 SSG 框架）为例：

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

const HomePage = () => {
    return (
        <div>
            <h1>这是 Next.js 生成的首页</h1>
        </div>
    );
};

export default HomePage;

在 Next.js 中，只需要在 pages 目录下创建对应的文件，就能自动生成相应的页面，并且可以通过配置实现 SSR 或 SSG 的功能。

通过这个阶段的学习，你可以更深入地了解 React 生态系统，掌握更多性能优化技巧，还能进行跨端开发，让你的 React 应用更强大、更适应不同的场景。

相关文章