React：一些模式、优化及其实现

January 5, 2025

控制反转：Render Props 与 React Hooks

在 vue3 中，Render Props 可以通过作用域插槽模拟。
vue3 的作用域插槽与组合式API 和这里探讨的 Render Props 与 React Hooks 是类似的。

Render Props 是在旧版 React 文档就已经存在的一种模式。
其本质可以说是一种控制反转（IoC），因为在这种模式中，渲染权交给了使用方。

tsx

function Toggle({
    render,
    initialOn = false,
}: {
    render: (props: { toggle: VoidFunction; on: boolean }) => React.ReactNode;
}) {
    const [on, setOn] = useState(initialOn);
    return render({
        toggle: () => setOn(!on),
        on,
    });
}

function App() {
    return (
        <Toggle
            render={({ toggle, on }) => {
                return <button onClick={toggle}>{on ? "on" : "off"}</button>;
            }}
        />
    );
}

在只有 类组件 的时代，上例也可以使用类组件实现。

另一种方式是抽象为 hooks，hooks 的特点是完全没有 渲染权。

function useToggle(initialOn = false) {
    const [on, setOn] = useState(initialOn);
    const toggle = () => setOn(!on);
    return { on, toggle };
}

此时 render props 又可以看成是对 hooks 的抽象：

tsx

function Toggle({
    render,
    initialOn = false,
}: {
    render: (props: { toggle: VoidFunction; on: boolean }) => React.ReactNode;
}) {
    const props = useToggle(initialOn); // 1. 调用 hooks 得到 props
    return render(props); // 2. 在 jsx 中消费 props
}

Custom hooks 确实可以替代 Render props，但使用 hooks 时需要两步：

调用 hooks 得到 props
在 jsx 中消费 props

此时，状态和 UI 是分离的。而 render props 由于拥有渲染权，只需要在 jsx 中消费状态就可以了。
这可以说是使用 render props 的优势，实际使用时权衡利弊即可。

Tip

新版 React 文档中也写了一些逻辑复用方法，参见这里

通过 Radix UI 得到一些启发

Radix UI 是现在很流行的组件库，其使用方式是非常组合式的，即组件由多个子组件组合而成。

以 Dialog/Modal 组件为例：

jsx

import React from "react";
import * as Dialog from "@radix-ui/react-dialog";
import { Cross2Icon } from "@radix-ui/react-icons";
import "./styles.css";

const DialogDemo = () => (
    <Dialog.Root>
        <Dialog.Trigger asChild>
            <button>Open Dialog</button>
        </Dialog.Trigger>
        <Dialog.Portal>
            <Dialog.Overlay />
            <Dialog.Content>
                <Dialog.Title>Title</Dialog.Title>
                <Dialog.Description>Description</Dialog.Description>
                <Dialog.Close asChild>
                    <button>Close Dialog</button>
                </Dialog.Close>
            </Dialog.Content>
        </Dialog.Portal>
    </Dialog.Root>
);

也可以看出 Radix UI 默认情况是 Uncontrolled 的，本文对此探讨略。

在不使用 context 的情况下，组件设计者可能将组件的各个部分使用 props 承载，这样只有一个组件：

tsx

import React, { useState } from "react";
import { Button, Modal } from "antd";

const App = () => {
    const [open, setOpen] = useState(false);
    const showModal = () => setOpen(true);
    const handleCancel = () => setOpen(false);

    return (
        <>
            <Button type="primary" onClick={showModal}>
                Open Modal
            </Button>
            <Modal
                open={open}
                onCancel={handleCancel}
                title="Title"
                footer={[
                    <Button key="back" onClick={handleCancel}>
                        Close
                    </Button>,
                    <Button key="submit" type="primary">
                        Submit
                    </Button>,
                ]}
            >
                Description
            </Modal>
        </>
    );
};

Radix UI 这种方式在于，其根组件用于创建状态并作为 context 提供：

Source: https://github.com/radix-ui/primitives/blob/main/packages/react/dialog/src/Dialog.tsx

tsx

const Dialog: React.FC<DialogProps> = (props: ScopedProps<DialogProps>) => {
    const { __scopeDialog, children, open: openProp, defaultOpen, onOpenChange, modal = true } = props;
    const triggerRef = React.useRef<HTMLButtonElement>(null);
    const contentRef = React.useRef<DialogContentElement>(null);
    const [open = false, setOpen] = useControllableState({
        prop: openProp,
        defaultProp: defaultOpen,
        onChange: onOpenChange,
    });

    return (
        <DialogProvider
            scope={__scopeDialog}
            triggerRef={triggerRef}
            contentRef={contentRef}
            contentId={useId()}
            titleId={useId()}
            descriptionId={useId()}
            open={open}
            onOpenChange={setOpen}
            onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}
            modal={modal}
        >
            {children}
        </DialogProvider>
    );
};

观察其实现可以发现，radix ui 每个组件是通过 createContextScope 来创建 context。
这种“作用域”机制是为了保证根组件创建的 context 只被自身类型的组件消费。

Source：https://github.com/radix-ui/primitives/blob/main/packages/react/context/src/createContext.tsx

tsx

import * as React from "react";

function createContext<ContextValueType extends object | null>() {
    // ...
    return [Provider, useContext] as const;
}

type Scope<C = any> = { [scopeName: string]: React.Context<C>[] } | undefined;
type ScopeHook = (scope: Scope) => { [__scopeProp: string]: Scope };
interface CreateScope {
    scopeName: string;
    (): ScopeHook;
}

function createContextScope(scopeName: string, createContextScopeDeps: CreateScope[] = []) {
    // ...
    return [createContext, composeContextScopes(createScope, ...createContextScopeDeps)] as const;
}

function composeContextScopes(...scopes: CreateScope[]) {
    // ...
    return createScope;
}

export { createContext, createContextScope };
export type { CreateScope, Scope };

另一个模式是 asChild，这是通过 Slot 组件实现的。它将传给 Slot 的 props 都转发给其直接子元素。

其实现实际上很简单，但要注意正确合并 event handlers 和 ref，另外还对 className 和 style 的合并有特殊处理。
Source: https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/Slot.tsx

下面给出一个简单实现：

tsx

function Slot({
    children,
    ...props
}: React.HTMLAttributes<HTMLElement> & {
    children?: React.ReactNode;
}) {
    if (React.isValidElement(children)) {
        return React.cloneElement(children, {
            ...props,
            ...children.props,
        });
    }
    if (React.Children.count(children) > 1) {
        React.Children.only(null);
    }
    return null;
}

状态粒度化：避免不必要重渲染

以 zustand 为例，它使状态粒度变小的方法是传入一个状态选择器函数：

// 粒度大
const state = useBearStore();

// 粒度小
const nuts = useBearStore((state) => state.nuts);
const honey = useBearStore((state) => state.honey);

Source（见 createImpl、useStore 实现）：https://github.com/pmndrs/zustand/blob/main/src/react.ts
Source（见 useStore 实现）：https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts

下面给出一个简单实现：

function createStore<T>(initialState: T) {
    let state = initialState;
    const listeners = new Set<VoidFunction>();

    const subscribe = (listener: VoidFunction) => {
        listeners.add(listener);
        return () => listeners.delete(listener);
    };

    const setState = (newState: T) => {
        state = newState;
        listeners.forEach((listener) => listener());
    };

    const getState = () => state;

    const useStoreWithSelector = <U>(selector: (state: T) => U) => {
        return React.useSyncExternalStore(
            subscribe,
            () => selector(getState()),
            () => selector(initialState),
        );
    };

    return { useStoreWithSelector, setState, getState };
}

使用选择器函数还是有些繁琐，类似 @vue/reactivity 或 signal 机制可能更简单。对此 react 生态中也有 valtio 这样基于 Proxy 的状态管理。

不妨借助 Proxy 来减小状态粒度，下面修改自这里：

function create<T extends object>(initial: T) {
    const state = initial;
    type Listener = (state: T, key: keyof T) => void;
    const listeners = new Set<Listener>();

    function subscribe(listener: Listener) {
        listeners.add(listener);
        return () => listeners.delete(listener);
    }

    function setState<K extends keyof T>(key: K, value: T[K]) {
        if (!Object.is(state[key], value)) state[key] = value;
        listeners.forEach((listener) => listener(state, key));
    }

    function useStore() {
        const rerender = useState()[1];
        const tracked = useRef({} as Record<keyof T, boolean>);
        const stateRef = useRef(state);

        useLayoutEffect(
            subscribe((_, key) => {
                if (tracked.current[key]) rerender({});
            }),
            [],
        );

        return useMemo(() => {
            stateRef.current = state;

            return new Proxy({} as T, {
                get(_, property) {
                    tracked.current[property] = true;
                    return stateRef.current[property];
                },
                set(_, property, value) {
                    setState(property as keyof T, value);
                    return true;
                },
            });
        }, []);
    }

    return useStore;
}

WIP：本章待改进

←Back to home

This work is licensed under CC BY-NC-SA 4.0

NickName

E-Mail

Website

Comments

Latest
Oldest
Hottest

No comment yet.

YieldRay

React：一些模式、优化及其实现

Preview: