关于react的一段代码,比较少见没见过这种用法

代码如下:

import React, { Component } from 'react';

class Counter extends Component {
  state = { value: 0 };

  increment = () => {
    this.setState(prevState => ({
      value: prevState.value + 1
    }));
  };

  decrement = () => {
    this.setState(prevState => ({
      value: prevState.value - 1
    }));
  };

  render() {
    return (
      <div>
        {this.state.value}
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
      </div>
    )
  }
}

主要是如下代码:不明白什么意思啊,文档上说this.setState()有回调函数,但是也米见过这种用法啊,这是什么鬼啊

  increment = () => {
    this.setState(prevState => ({
      value: prevState.value + 1
    }));
  };

小弟刚刚自学react万望大家给解释一下,谢谢啦

阅读 2.3k
3 个回答
新手上路,请多包涵

这个是es语法,可以先去看一下es2015基本语法

increment = () => {
    this.setState(prevState => ({
      value: prevState.value + 1
    }));
  };

相当于

increment = function () {
    this.setState(function(prevState){
        return { value: prevState.value + 1 };
    });
}

es6语法
increment = 这个函数

而里面的就是函数索要执行的,你这里就是执行this.setState()这个方法

在里面就是一个funtion ,参数为prevState 返回的结果就是一个object {value:prevState.value+1}

调用的话只需要
increment()
就可以更改state这个值了,然后页面就会从新刷新一次,会非常的快,因为react用的是虚拟dom,效率十分高

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题