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

# reaxper

## API

### With Class Components

{% code overflow="wrap" lineNumbers="true" %}
```typescript
export const YourComponent = Reaxper(class extends Reaxlass {
   render() {
      return 'some JSX ...';
   }
});
```
{% endcode %}

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

### With Functional Components

{% code overflow="wrap" lineNumbers="true" %}
```typescript
export const YourComponent = Reaxper((props) => {
   return 'some JSX ...';
});
```
{% endcode %}

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

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

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

{% hint style="info" %}
如果你有使用过Mobx的经验 , 那么应该能够很容易地理解这一条.&#x20;

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

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

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

* **为CC提供了compontDidRender生命周期**

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

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

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

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