Javascript 重构组件

我是React的新手，我正在尝试做一个简单的点击游戏。现在一切都运行良好（在我看来），但我认为代码非常重复（我使用了很多setState）。有人能告诉我如何使它更干净和处理国家？我不要求你为我重构这段代码，只是为了给我一些建议。谢谢你的建议

这是我的密码：

import React, { Component } from 'react';

class Enemy extends Component {
  constructor(props) {
    super(props);

    this.state = {
      hp: 10,
      nextHp: 12,
      clickDamage: 1,
      gold: 0,
      dps: 0.1,
      num: 1,
      tapCount: 0,
      itemCount: 0,
      tapCost: 10,
      itemCost: 50
    };

    this.handleClick = this.handleClick.bind(this);
    this.buyTap = this.buyTap.bind(this);
    this.buyItem = this.buyItem.bind(this);
  }

  componentDidMount() {
    const interval = setInterval(() => {
      this.setState({ hp: this.state.hp -= this.state.dps });
      if(this.state.hp <= 0) {
        this.setState({ hp: this.state.hp = this.state.nextHp });
        this.setState({ nextHp: Math.floor(this.state.nextHp * 1.2) })
        this.setState({ gold: this.state.gold + 10});
        this.setState({ num: Math.floor(Math.random() * 4 + 1)});
      }
    }, 100);
  }

  handleClick() {
    this.setState({ hp: this.state.hp - this.state.clickDamage });

    if(this.state.hp <= 0) {
      this.setState({ hp: this.state.hp = this.state.nextHp });
      this.setState({ nextHp: Math.floor(this.state.nextHp * 1.2) })
      this.setState({ gold: this.state.gold + 10});
      this.setState({ num: Math.floor(Math.random() * 4 + 1)});
    }
  }

  buyTap() {
    if (this.state.gold >= this.state.tapCost) {
      this.setState({ gold: this.state.gold -= this.state.tapCost });
      this.setState({ tapCount: this.state.tapCount += 1 });
      this.setState({ clickDamage: this.state.clickDamage += 1 })
    }
  }

  buyItem() {
    if (this.state.gold >= this.state.itemCost) {
      this.setState({ gold: this.state.gold -= this.state.itemCost });
      this.setState({ itemCount: this.state.itemCount += 1 });
      this.setState({ dps: this.state.dps += 0.1 });
    }
  }

  render() {
    return (
      <div>
        <div className="container ui center aligned">
          <h1>Enemy hp: {Math.round(this.state.hp)}</h1>
          <h3>Gold: {this.state.gold}</h3>
          <h3>Click damage: {this.state.clickDamage}</h3>
          <h3>Damage per second: {Math.round(this.state.dps * 10)}</h3>
          <img
            alt=""
            className="dragon"
            src={require("../img/dragon" + this.state.num + ".jpg")}
            onClick={this.handleClick}
            draggable={false}
          />
        </div>
        <div className="ui container">
          <img
            onClick={this.buyTap}
            alt=""
            style={{ width: '50px' }}
            src={require("../img/tap.png")}
          />
          <p>Count: {this.state.tapCount}</p>
          <p>Cost: {this.state.tapCost}</p>
          <img
            onClick={this.buyItem}
            alt=""
            style={{ width: '50px' }}
            src={require("../img/rapier.png")}
          />
          <p>Count: {this.state.itemCount}</p>
          <p>Cost: {this.state.itemCost}</p>
        </div>
      </div>
    );
  }
}

export default Enemy;

import React，{Component}来自'React'；
类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
hp:10，
下次：12，
点击损坏：1，
金牌:0,，
dps:0.1，
数目:1,，
抽头数：0，
itemCount:0，
成本：10，
项目成本：50
};
this.handleClick=this.handleClick.bind（this）；
this.buyTap=this.buyTap.bind（this）；
this.buyItem=this.buyItem.bind（this）；
}
componentDidMount（）{
常量间隔=设置间隔（（）=>{
this.setState（{hp:this.state.hp-=this.state.dps}）；
if（this.state.hp=this.state.itemCost）{
this.setState（{gold:this.state.gold-=this.state.itemCost}）；
this.setState（{itemCount:this.state.itemCount+=1}）；
this.setState（{dps:this.state.dps+=0.1}）；
}
}
render（）{
返回(
敌人生命：{Math.round（this.state.hp）}
黄金：{这个。州。黄金}
单击损坏：{this.state.clickDamage}
每秒伤害：{Math.round（this.state.dps*10）}
计数：{this.state.tapCount}

成本：{this.state.tapCost}

计数：{this.state.itemCount}

成本：{this.state.itemCost}

);
}
}
出口违约敌人；

不需要考虑太多因素。但我可以说，您的所有状态更新都可以合并。您可以一次更新多个状态值

this.setState({ hp: this.state.hp = this.state.nextHp });
this.setState({ nextHp: Math.floor(this.state.nextHp * 1.2) })
this.setState({ gold: this.state.gold + 10});
this.setState({ num: Math.floor(Math.random() * 4 + 1)});

到

旁注：类似于

this.State.hp=this.State.nextHp的状态突变是一种react反模式，可能导致bug

第二点注意：对于依赖于当前状态值的状态更新，最好使用功能状态更新，以便在渲染周期中触发多个更新的情况下，状态更新正确排队并进行处理

this.setState(prevState => ({
  hp: prevState.nextHp,
  nextHp: Math.floor(prevState.nextHp * 1.2),
  gold: prevState.gold + 10,
  num: Math.floor(Math.random() * 4 + 1)
}));

下面是我的一个例子，它说明了为什么功能更新非常重要。
不需要考虑太多因素。但我可以说，您的所有状态更新都可以合并。您可以一次更新多个状态值

this.setState({ hp: this.state.hp = this.state.nextHp });
this.setState({ nextHp: Math.floor(this.state.nextHp * 1.2) })
this.setState({ gold: this.state.gold + 10});
this.setState({ num: Math.floor(Math.random() * 4 + 1)});

到

旁注：类似于
this.State.hp=this.State.nextHp的状态突变是一种react反模式，可能导致bug

第二点注意：对于依赖于当前状态值的状态更新，最好使用功能状态更新，以便在渲染周期中触发多个更新的情况下，状态更新正确排队并进行处理

this.setState(prevState => ({
  hp: prevState.nextHp,
  nextHp: Math.floor(prevState.nextHp * 1.2),
  gold: prevState.gold + 10,
  num: Math.floor(Math.random() * 4 + 1)
}));

下面是我的一个例子，它说明了为什么这个函数更新很重要。
除了像@Drew Reese的答案那样将
setState
s组合成一个函数外，还可以通过在类中将它们定义为箭头函数来避免绑定方法（即
this.handleClick=this.handleClick.bind（this）；
）

  handleClick = () => {
    // ...
  }

  buyTap = () => {
    // ...
  }

  buyItem = () => {
    // ...
  }

这样，还可以从中删除构造函数

  constructor(props) {
    super(props);

    this.state = {
      hp: 10,
      nextHp: 12,
      clickDamage: 1,
      gold: 0,
      dps: 0.1,
      num: 1,
      tapCount: 0,
      itemCount: 0,
      tapCost: 10,
      itemCost: 50
    };

    this.handleClick = this.handleClick.bind(this);
    this.buyTap = this.buyTap.bind(this);
    this.buyItem = this.buyItem.bind(this);
  }

公正

// (state is defined without a constructor as an instance variable)
state = {
    hp: 10,
    nextHp: 12,
    clickDamage: 1,
    gold: 0,
    dps: 0.1,
    num: 1,
    tapCount: 0,
    itemCount: 0,
    tapCost: 10,
    itemCost: 50
};

除了像@Drew Reese的回答中那样将
setState
s组合成一个外，还可以通过将它们定义为类中的箭头函数来避免绑定方法（即
this.handleClick=this.handleClick.bind（this）；
）

  handleClick = () => {
    // ...
  }

  buyTap = () => {
    // ...
  }

  buyItem = () => {
    // ...
  }

这样，还可以从中删除构造函数

  constructor(props) {
    super(props);

    this.state = {
      hp: 10,
      nextHp: 12,
      clickDamage: 1,
      gold: 0,
      dps: 0.1,
      num: 1,
      tapCount: 0,
      itemCount: 0,
      tapCost: 10,
      itemCost: 50
    };

    this.handleClick = this.handleClick.bind(this);
    this.buyTap = this.buyTap.bind(this);
    this.buyItem = this.buyItem.bind(this);
  }

公正

// (state is defined without a constructor as an instance variable)
state = {
    hp: 10,
    nextHp: 12,
    clickDamage: 1,
    gold: 0,
    dps: 0.1,
    num: 1,
    tapCount: 0,
    itemCount: 0,
    tapCost: 10,
    itemCost: 50
};

嗨！我想这个问题最好在…上问你好！我想这个问题最好在…上问