告别编写繁琐的 react state handler

react-powerplug 是一个封装各种常见 数据操作逻辑的 react 组件库。

它可以用来干什么呢？一句话：抽象并简化你的 react state 操作！

简单做个对比。

假设需要做一个 react 计数器，那么通常来说，我们需要手动编写一些 state 操纵函数，代码可能会写成这样：

class MyCounter extends React.Component {
  state = {
    cnt: 0
  }

  handleInc = () => {
    const cnt = this.state.cnt + 1;
    this.setState({ cnt });
    doSomething(cnt);
  }

  handleDec = () => {
    const cnt = this.state.cnt - 1;
    this.setState({ cnt });
    doSomething(cnt);
  }

  render() {
    return (
      <div>
        <h1>Count: ${this.state.cnt}</h1>
        <button onClick={this.handleInc}>Inc</button>
        <button onClick={this.handleDec}>Dec</button>
      </div>
    )
  }
}

看上去问题不大。但如果业务开始逻辑膨胀，交互复杂起来，那我们需要编写更多的 state change handler。这些 handler 的大量存在会一定程度上干扰我们阅读业务逻辑代码。

所以我们是不是可以抽象一下，把这种通用的 state change handler 下沉到通用组件里，不和业务代码耦合在一起？

react-powerplug 帮我们做了这些事情。利用这个库，我们可以很大程度上简化上述代码：

import { Counter } from 'react-powerplug';

class MyCounter extends React.Component {

  handleChange = (cnt) => {
    doSomething(cnt);
  }

  render() {
    return (
      <Counter initial={0} onChange={this.handleChange}>
        {
          ({ count, inc, dec }) => (
            <div>
              <h1>Count: {count}</h1>
              <button onClick={inc}>Inc</button>
              <button onClick={dec}>Dec</button>
            </div>
          )
        }
      </Counter>
    )
  }
}

所有和计数器状态相关的数据操作都收拢到了 Counter 组件里，MyCounter 组件只需专注于 doSomething() 这个业务即可！

更好的组件职责划分可以帮助我们持续维护代码质量。react-powerplug 还提供了 List、Map、Toggle 等常见 ui 操作封装组件，具体可参阅官方文档。