指南
配置
插件
API
教程
社区
指南
配置
插件
API
教程
社区
简体中文

useStaticModel

补充信息

默认情况下，本节所有 API 的导出包名为：@modern-js/runtime/model。

如果是在 Modern.js 以外单独集成 Reduck，导出包名为：@modern-js-reduck/react。

如果想在组件里以 React Hook 的形式消费某个 Model，并能随时获取到当前最新的状态，但又不希望 Model 状态更新的时候，引起组件的重新渲染，可以使用 useStaticModel。useStaticModel API 形式上与 useModel 完全一致。具体使用请参考 useModel。

为了保证总是能获取到最新状态，注意不要对返回的 state 解构。

function App() {
  // ❌ 不能解构 state，但可以解构 actions。
  const [{ username }, { logout }] = useStaticModel(userModel);

  // ✅ 这才是正确使用姿势。
  const [state, { logout }] = useStaticModel(userModel);

  useEffect(() => {
    state.username;
  }, []);
}

示例

如下 App 组件消费了 userModel 的状态，但没有直接在 JSX 里使用。可以发现，userModel 状态的改变没有必要引起组件重新渲染，这种情况可以使用 useStaticModel 进行优化。

function App() {
  const [state] = useStaticModel(userModel);

  useEffect(() => {
    // 统计 UV 数据
    send('pageview', { user: state.user });
  }, [state]);

  return <div>Hello</div>;
}
更多参考

使用 Model

ON THIS PAGE