求和案例之纯 react 版

上节课我们看了一下redux的工作流程，看了流程图，也对redux的三大核心概念来做了简单的介绍，那么这节课我们来用react不引入redux来实现一版：

回顾

在实现这个demo之前，我们来对上节课的内容来做一个简单的回顾

action`，动作对象，包含两个固定属性
type：动作类型
data：操作数据
reducers，用于初始化和加工state
store，居中调度，负责任务分发和存储state

以上便是上节课的主要内容，接下来我们来实现我们的demo

需求描述

我们做一个效果页面上展示一个数字，然后一个下拉选择框，两个按钮，一个加一个减，我们在下拉框里选择一个数字，点击加，页面上的数字就加几，点击减就减几。然后再来一个按钮，如果展示的数字是奇数，就加否则不加。然后再来一个异步的加按钮。我们来思考一下这么实现。

需求实现

export default class Sum extends Component {
  render() {
    return (
      <div>
        <h1>当前求和为：0</h1>
        <select ref={c => this.selectNum = c}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <button>+</button>
        <button>-</button>
        <button>odd</button>
        <button>async</button>
      </div>
    )
  }
}

到现在这个阶段我们应该对实现一个小案例的静态组件已经十分熟悉才对，我们就不对代码做过多的分析了。就是简单的元素我们来看一下最终的结果：

但是我们目前这样是不是根本还不能够实现我们的功能啊？那么我们来绑定onClick事件，并且初始化state来实现动态加载：

export default class Sum extends Component {
  state = { count: 0, };

  render() {
    const { count } = this.state;
    return (
      <div>
        <h1>当前求和为：{count}</h1>
        <select ref={c => this.selectNum = c}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <button onClick={this.add}>+</button>
        <button onClick={this.dec}>-</button>
        <button onClick={this.odd}>odd</button>
        <button onClick={this.async}>async</button>
      </div>
    )
  }
  add = () => {
    const { value } = this.selectNum;
    const { count } = this.state;
    this.setState({ count: count + value * 1 });
  }
  dec = () => {
    const { value } = this.selectNum;
    const { count } = this.state;
    this.setState({ count: count - value * 1 });
  }
  odd = () => {
    const { value } = this.selectNum;
    const { count } = this.state;
    this.setState({ count: count % 2 !== 0 ? count + value * 1 : count });
  }
  async = () => {
    const { value } = this.selectNum;
    const { count } = this.state;
    setTimeout(() => {
      this.setState({ count: count + value * 1 });
    }, 1000)
  }
}

我们来看一下代码，都是绑定了onClick事件，没有什么可说的，这里我们给value * 1是干什么的呢？是不是我们写这个来使得字符串转成number啊？那么我们来看一下效果：

iShot2022-01-18 15.21.25

我们来看一下，这一次我们所有的功能都已经实现了。

总结

这节课没有什么需要总结的，大家如果说对react来编写一个demo不熟练的话，可以先展厅一下学习的进度，赶紧回头去多复习，多练。以上就是这节课用react来实现一个求和的demo

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/demo_only_react/