README-zh_CN.md

react-easy-watcher

在react组件中监听state的改变，就好像vue中的watcherapi一样

English README

依赖 React 和 Lodash.isequal.

安装

npm install react-easy-watcher --save

使用

• 将一个组件用高阶组件watcher封装一层然后返回
• 要监听state变化很简单，在组件的state中定义watch对象（必须），其他的操作就和vue中的watch 一样容易了，该对象的键为组件中想监听的state字段，值为一个函数，当要监听的字段发生变化时（支持深度监听），触发这个函数。函数的参数为监听字段的改变前后的值。

import React, { Component } from 'react';
import watcher from 'react-easy-watcher';

class Hello extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: 'react-easy-watcher',
            watch: {
                msg(newVal,oldVal) {
                    console.log(newVal,oldVal,this)  
                }
            }
        }
    }
    change() {
        this.setState({
            msg: 'hello world!'
        })
    }
    render() {
        const { msg } = this.state
        return (
            <div>
                <h1>{ msg }</h1>
                <button onClick={this.change.bind(this)}>change</button>
            </div>
        )
    }
}
export default watcher(Hello);

Authors

zysallen

License

MIT