# mdel-react

> 绑定react组件，来监视容器的数据修改

Latest version **4.0.3** (published 2022-11-29) · USHO license · 0 weekly downloads

## Install

```sh
npm install mdel-react
pnpm add mdel-react
yarn add mdel-react
bun add mdel-react
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.3 |
| Published | 2022-11-29 |
| First published | 2022-11-29 |
| Weekly downloads | 0 |
| License | USHO |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 11.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | yangfuhe |
| Maintainers | yangfuhe |
| Keywords | mdel, model, mdeljs, react |

## Links

- npm: https://www.npmjs.com/package/mdel-react
- npm.io page: https://npm.io/package/mdel-react

## Dependencies (3)

- [mdel](https://npm.io/package/mdel.md) ^4.0.0
- [react](https://npm.io/package/react.md) ^16.7.0
- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^3.2.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 4.0.3 (latest) — 2022-11-29
- 4.0.2 — 2022-11-29
- 1.0.2 — 2022-11-29
- 1.0.1 — 2022-11-29

## README

# mdel-react
绑定react组件，来监视数据容器的修改

## 安装

* 安装：`npm install mdel-react --save `


## 使用

**observe** 用来监视一个组件，   可以是类组件，也可以是无状态组件 <br />
当组件 props 中的容器或者组件的容器属性发生数据修改时，会自动渲染组件 <br />
使用 componentStoreChange 返回 true 会阻止自动渲染，从而达到手动控制渲染，componentStoreChange 只在组件 mount 时触发

## 示例

```jsx harmony
import {observe} from 'mdel-react'

//1.
@observe
class UserComponent extends React.Component{
    sUser = userStore;
    sList = new ListModel();
    
    //componentStoreChange 可省略
    componentStoreChange(store,prevData){
        //... 
    }
    
    render(){
        const {sHistory} = this.props;
        
        return <div>
            ...
        </div>
    }
}
//2.
const ListComponent = observe(function({sHistory,sList}) {
  return <div>
    ...
  </div>
})

```

## API

### observe

```typescript
  interface IComponentStoreChange {
    (store,prevData):true|any
  }
  interface Component extends React.Component{
    componentStoreChange?:IcomponentStoreChange
  }
  
  interface observe extends ClassDecorator{
    <T extends React.ComponentClass>(ClassComponent:T,componentStoreChange?:IcomponentStoreChange):T
    <T extends React.FunctionComponent>(functionComponent:T,componentStoreChange?:IcomponentStoreChange):T
  }
```

绑定react组件，监视容器的数据修改

* componentStoreChange，在容器数据修改后执行，返回 **true** 则不会渲染组件

#### 示例
```jsx harmony
//示例1
@observe
class UserComponent extends React.Component{}
//示例2
const UserComponent = observe(
    class extends React.Component{}
);
//示例3
const UserComponent = observe(
    function({sUser}){
        return <div>
            ...
        </div>
    }
);
```

### combine

```typescript
  interface ICombine {
    (...args:IcomponentStoreChange[]):IcomponentStoreChange
  }
```

合并多个 componentStoreChange 为一个函数，执行顺序为从左向右

#### 示例

```jsx harmony
@observe
class UserComponent extends React.Component{
    componentStoreChange = combine(
        locationSearchChange(function() {
          console.log('search change');
          //当location中search发生修改时不要渲染组件
          return true;
        }),
        //...
    )
}

function locationSearchChange(callback) {
  return function(store,prevData) {
    if(store.name === 'history' && prevData.search !== store.data.search){
        return callback(prevData);
    }
  }
}
```

---
_Source: https://npm.io/package/mdel-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._