@tiencoffee/reactive2

Change React state directly without setState, just like Vue.

Download

• reactive2.js (695 bytes, minified)

Installation

In a browser:

<script src="reactive2.js"></script>

or using a CDN

<script src="https://unpkg.com/@tiencoffee/reactive2"></script>

Using npm:

$ npm i @tiencoffee/reactive2

Usage

• Just inherit the Reactive class instead of React.Component. Now, you can change the state directly. In addition, the methods will automatically be bound. Example:

class Foo extends Reactive {
  constructor(props) {
    super(props)

    this.state = {
      bar: "qux",
      baz: "quux"
      arr: [1, 2, 3]
    }
  }

  onClick() {
    console.log(this.state.baz)
  }

  componentDidMount() {
    this.state.bar = 16
    this.state.arr.push(4, 5, 6)
    this.state.arr.pop()
    this.state.arr.reverse()
    delete this.state.bar
    this.state.fred = {a: 50, b: null, c: 2}
  }

  render() {
    return (
      <div onClick={this.onClick}>
        {this.state.baz}
      </div>
    )
  }
}