reaxper

使你的React组件获得响应store变化时重渲染的高阶函数

API

With Class Components

export const YourComponent = Reaxper(class extends Reaxlass {
   render() {
      return 'some JSX ...';
   }
});

在类组件使用Reaxper时，必须继承自Reaxlass类。

With Functional Components

export const YourComponent = Reaxper((props) => {
   return 'some JSX ...';
});

现在React组件们已经获得了自动从orzMobx store变化而重新渲染的能力。

Reaxper为React组件提供了以下能力:

  • 使FC和CC获得自动的依赖收集

如果你有使用过Mobx的经验 , 那么应该能够很容易地理解这一条.

Reaxper继承了mobx的observer能力 , 使得FC&CC在第一次组件渲染时告诉store使用了哪些属性, 当setState时 , 如果组件依赖store内属性的任意一项发生了改变 , 收集了依赖的所有组件都将被重新渲染.

同时它也扩展了mobx.observer未曾处理的问题 : RH in CC 无法被收集依赖 , CC内的render函数因为支持了调用RH , render从而变成了一个独立于CC的函数组件. 这使得render无法触发CC的生命周期 , 也无法被正常地收集依赖.

自动的依赖收集是reaxes架构中非常核心的能力

  • 为CC提供了compontDidRender生命周期

Reaxper扩展了类组件的生命周期 , didRender会在CC的第一次渲染和后续更新中都被调用 , 将componentDidUpdate和componentDidMount融为一体

  • 允许在CC的render函数中使用RH

Reaxes架构不推荐在复杂的业务逻辑中使用react hooks , 所以我们从技术上支持了您在使用CC时 , 也可以处理不得不使用RH的场景.

(比如react-router v6已几乎不支持非RH的用法 , 我需要在render内使用useNavigate )

PreviousReaxlassNextChange Log

Last updated