函数式/组合式简单原理示例

May 7, 2024

名词定义：

函数式：这里指的是类似 React>=16.8 函数式组件（React Hooks）
组合式：Vue>=2.7,>=3 组合式 API

基本原理很简单，因此先代码，再说明优劣

简单原理示例

lib.ts

// 这个简单示例使用 Person 为例，真实的库中可能就是一个 Component 类（而且往往是仅库内部使用的）
class Person {
    name: string = "unnamed";
    age: number = 0;
    onRender?: VoidFunction;
}

/**
 * 函数式组件（组合式 API）风格：例如 React 中的 useState/useEffect 等，或 vue 的生命周期钩子如 onMounted
 * 本质上是利用闭包来捕获当前的组件的实例
 * 显然，由于是闭包，下面这个 API 函数不是纯函数
 */
export function setName(name: string) {
    if (!currentInstance) throw new Error("setName 只能在函数式组件内部调用");
    currentInstance.name = name;
}
export function setAge(age: number) {
    if (!currentInstance) throw new Error("setAge 只能在函数式组件内部调用");
    currentInstance.age = age;
}
export function onRender(cb: VoidFunction) {
    if (!currentInstance) throw new Error("onRender 只能在函数式组件内部调用");
    currentInstance.onRender = cb;
}

// 在这个示例中，函数式组件只是一个简单的函数
export type FunctionalComponent = (context?: unknown) => void;

/**
 * 一般来说，当前实例的引用是仅对库内部公开的
 * 例如，在 vue 中是这样的：
 * export let currentInstance: ComponentInternalInstance | null = null
 * @see https://github.com/vuejs/core/blob/main/packages/runtime-core/src/component.ts#L644
 */
let currentInstance: Person | null = null;

/**
 * 在这里，渲染函数只是指代真正执行任务的函数（这里和真正的渲染没有任何关系）
 */
export async function render(fcs: FunctionalComponent[]) {
    const result: Person[] = [];
    for (const fc of fcs) {
        currentInstance = new Person();
        fc(/* 提供一个上下文，只是为了演示 */ { timestamp: Date.now() });
        currentInstance.onRender?.();

        // 只是为了说明渲染函数真正的渲染工作可以是异步调度的
        await new Promise((resolve) => setTimeout(resolve, 500));
        result.push(currentInstance);
    }
    currentInstance = null;
    return result;
}

函数式组件（即一个组件的实现方式是一个函数）本身是无状态的（即不依赖外部状态）。而函数具体会在何时，通过什么参数被调用，也是由库决定的。

React 则建议函数式组件为纯函数。

demo.ts

import { onRender, render, setAge, setName } from "./lib";

const Mike: FunctionalComponent = (ctx: unknown) => {
    setName("Mike");
    onRender(() => {
        console.log("Mike is being rendered! And context is :", ctx);
    });
};

const Alice: FunctionalComponent = () => {
    const name = "Alice";
    setName(name);
    setAge(20);
    onRender(() => {
        console.log(`${name} is being rendered!`);
    });
};

const result = await render([Mike, Alice]);
console.log(result);

优点和缺点

Vue.js 的文档中其实已经说明了这种实现方式的优点，不过它是仅对于 vue 做说明的。

如果我们将这种设计抽象为一种与具体实现无关的设计模式，可以总结其优点如下：

函数式组件本身是无状态的，这有利于代码复用（因为它不依赖上下文）
库本身的 API 是通过多个函数暴露的，因此使用者只需关心自己调用的函数。未使用的 API 函数还可以利用 TreeShaking 减小打包体积（不过一般收益不明显，因为这种 API 函数往往并非实际功能的主要实现者）

可能的缺点：

依赖于闭包，库本身注定不是 side-effect free 的
一旦使用库提供的组合式 API，则对库产生强依赖，几乎不可移植，不过对于基础库来说并不算很大的缺点

←Back to home

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

函数式/组合式 简单原理示例

函数式/组合式简单原理示例