组件添加observer后数据监听才会变化

提醒

mobx 实现数据绑定 observer 和监听数据缺一不可

在使用 mobx 包装组件时，需要在组件上添加 observer 装饰器，使得组件能够监听到数据变化。

import React from "react";
import { observer } from "mobx-react-lite";

export const Component = observer(() => {
  useEffect(() => {
    // 组件的生命周期方法不会被触发
  }, []);

  useEffect(() => {
    // watchData 变化时，组件的生命周期方法才会被触发
    console.log("watchData 变化时，组件的生命周期方法才会被触发");
  }, [watchData]);
});

同理，如果组件想使用 useEffect 钩子，需要在组件上添加 observer 装饰器。

import React from "react";

export const Component = () => {
  useEffect(() => {
    // 此处添加了 watchData 也不会触发，因为缺少 observer
    console.log("watchData 变化时触发");
  }, [watchData]);
};