Reactjs 学习反应：为什么我们不必在第18行中使用this.state.count来访问计数，而必须在第12行中使用this.state.imageUrl？

我不确定如果我改为在第18行执行此操作，为什么输出会消失。state.count。谢谢你的帮助

  export default class Counter extends Component {
  state = {
    count: 0,
    imageUrl: "https://picsum.photos/200"
  };

  render() {
    return (
      <div>
    <img src={this.state.imageUrl} alt="" />
    <span>{this.formatCount()}</span>
        <button>Increment</button>
      </div>
    );
  }

  formatCount() {
    const { count } = this.state;
    return count === 0 ? "Zero" : count;
  }
}

导出默认类计数器扩展组件{
状态={
计数：0，
图像URL:“https://picsum.photos/200"
};
render（）{
返回(
{this.formatCount（）}
增量
);
}
formatCount（）{
const{count}=this.state；
返回计数===0？“零”：计数；
}
}

当您执行以下操作时：

const { count } = this.state;

从

这个.state

中提取

count

，这称为解构

你也可以这样做：

formatCount() {
    return this.state.count === 0 ? "Zero" : this.state.count;
}

---

this

const{count}=this.state

称为destructuring，它已添加到es2015版本的javascript中

您可以像这样为propty设置新的变量名

const{count:value}=this.state

如果对象值未定义，则设置初始值

const{count=0}=this.state

啊，这是有道理的，是因为当我们做const{count}=this.state时有大括号；是的，您还可以执行
const{imageUrl，count}=this.state
从对象中提取多个属性