mobx-react-lite

---

🚨🚨🚨 本仓库已迁移至 mobx

---

这是 mobx-react 的简化版本，仅支持 React 函数组件，因此使库变得更快速且更小巧（仅 1.5kB 压缩后大小）。但请注意，仍然可以在类组件的渲染中使用 <Observer>。 与 mobx-react 不同，它没有 Provider/inject，因为可以使用 useContext 作为替代。

兼容性表格（主要版本）

mobx	mobx-react-lite	浏览器
6	3	现代浏览器（IE 11+ 兼容模式）
5	2	现代浏览器
4	2	IE 11+，RN 不带 Proxy 支持

mobx-react-lite 需要 React 16.8 或更高版本。

用户指南 👉 https://mobx.js.org/react-integration.html

---

API 参考手册 ⚒

observer<P>(baseComponent: FunctionComponent<P>): FunctionComponent<P>

observer 将组件转化为响应式组件，自动追踪使用了哪些可观察值，并在这些值变化时重新渲染组件。 仅可用于函数组件。对于类组件支持，请查看 mobx-react 包。

<Observer>{renderFn}</Observer>

是一个 React 组件，将观察者应用于组件中的匿名区域。<Observer> 可以在类组件和函数组件中使用。

useLocalObservable<T>(initializer: () => T, annotations?: AnnotationsMap<T>): T

根据给定的属性、方法和计算值创建一个可观察对象。

注意，计算值不能直接依赖非可观察值，只能依赖可观察值，因此可能需要使用 useEffect 将属性同步到可观察对象中（见下方 useAsObservableSource 的示例）。

useLocalObservable 是以下代码的简写：

const [state] = useState(() => observable(initializer(), annotations, { autoBind: true }))

enableStaticRendering(enable: true)

在服务端渲染环境中运行时，调用 enableStaticRendering(true)，其中 observer 包裹的组件永远不应重新渲染，而是在第一次渲染后自动清理。使用 isUsingStaticRendering() 检查当前设置。

---

已弃用 API

useObserver<T>(fn: () => T, baseComponentName = "observed", options?: IUseObserverOptions): T (已弃用)

此 API 在 3.* 版本中已弃用。它经常被错误使用（例如，用于选择数据而不是用于渲染，而且 <Observer> 更好地分离了渲染与组件更新）

interface IUseObserverOptions {
    // optional custom hook that should make a component re-render (or not) upon changes
    // Supported in 2.x only
    useForceUpdate: () => () => void
}

它允许您实现类似观察者的行为，同时仍然可以按需优化组件（例如使用带有自定义 areEqual 的 memo，使用 forwardRef 等），并且可以准确声明被观察的部分（渲染阶段）。

useLocalStore<T, S>(initializer: () => T, source?: S): T（已弃用）

此 API 在 3.* 版本中已弃用，请使用 useLocalObservable。它们的功能大致相同，但 useLocalObservable 接受一组注解作为第二个参数，而不是 source 对象。不建议使用 source，有关详细信息，请查看 useAsObservableSource 的弃用消息。

通过使用 useLocalStore 钩子，可以引入本地可观察状态，该钩子执行初始化函数一次以创建可观察存储，并在组件的生命周期内保持它。

注解与传递给 MobX 的 observable API 的注解类似，可用于覆盖特定字段的自动成员推理。

useAsObservableSource<T>(source: T): T（已弃用）

useAsObservableSource 钩子可用于将任何一组值转换为具有稳定引用（每次从钩子返回的是同一个对象）的可观察对象。

此 API 在 3.* 版本中已弃用，因为它依赖于在渲染过程中更新可观察对象，这是一个反模式。相反，应使用 useEffect 来同步非可观察值。例如：

// Before:
function Measurement({ unit }) {
    const observableProps = useAsObservableSource({ unit })
    const state = useLocalStore(() => ({
        length: 0,
        get lengthWithUnit() {
            // lengthWithUnit can only depend on observables, hence the above conversion with `useAsObservableSource`
            return observableProps.unit === "inch"
                ? `${this.length * 2.54} inch`
                : `${this.length} cm`
        }
    }))

    return <h1>{state.lengthWithUnit}</h1>
}

// After:
function Measurement({ unit }) {
    const state = useLocalObservable(() => ({
        unit, // the initial unit
        length: 0,
        get lengthWithUnit() {
            // lengthWithUnit can only depend on observables, hence the above conversion with `useAsObservableSource`
            return this.unit === "inch" ? `${this.length * 2.54} inch` : `${this.length} cm`
        }
    }))

    useEffect(() => {
        // sync the unit from 'props' into the observable 'state'
        state.unit = unit
    }, [unit])

    return <h1>{state.lengthWithUnit}</h1>
}

请注意，您可以选择自行承担风险，不使用 useEffect，而是在渲染时直接执行 state.unit = unit。

这种方式更接近旧的行为模式，但如果这会影响其他组件的渲染，React 将正确地发出警告。

观察者批处理（已弃用）

注意：仅在使用 mobx-react-lite 2.0.* 或 2.1.* 版本时，配置观察者批处理才是必需的。从 2.2 版本开始，将根据 react-dom / react-native 包的可用性自动进行配置。

查看详细的解释。

简而言之，在没有观察者批处理的情况下，React 无法在某些情况下保证组件渲染的顺序。我们强烈建议您配置批处理，以避免这些意外的惊喜。

在任何 React 渲染发生之前导入以下内容，通常是在 index.js/ts 中。对于 Jest 测试，您可以使用 setupFilesAfterEnv。

React DOM:

import 'mobx-react-lite/batchingForReactDom'

React Native:

import 'mobx-react-lite/batchingForReactNative'

退出批处理

在某些特定情况下退出批处理，只需导入以下内容以禁用警告。

import 'mobx-react-lite/batchingOptOut'

自定义批处理更新

以上导入是为了方便使用标准的批处理版本。如果您因为某些原因有自定义的批处理更新版本，您可以执行以下操作代替。

import { observerBatching } from "mobx-react-lite"
observerBatching(customBatchedUpdates)

测试

现在运行完整的测试套件需要 node 14 或以上版本，但库本身并无此限制。

为了防止由于 React 的 fiber 处理或 StrictMode 导致的渲染中断而产生的内存泄漏，在那些不支持 FinalizationRegistry 的环境中，本库需要运行定时器来清理中断渲染的残留。

这可能会与像 Jest 这样的测试框架产生冲突，因为这些框架要求在测试退出前清理定时器。

clearTimers()

在测试的 afterEach 中调用 clearTimers()，以确保 mobx-react-lite 能立即清理并允许测试正常退出。