都说三大框架好
其中非常大的好处在于数据响应式
那么 react数据响应式的语法就是靠state实现的

首席 你要创建一个react项目
可以看我的文章
安装并创建一个react项目
因为也不做什么太复杂的功能 我就直接将代码写在App.jsx中了

import './App.css';
import React from "react";

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      numericalValue: 1
    }
  }
  render(){
    return (
      <div className="App">
        <span>{ this.state.numericalValue }</span>
      </div>
    )
  }
}

export default App;

然后我们的项目界面就会变成这样

当然 我把App.css中的样式改了一下 可能在样式上 有点不一样

我们界面中输出的1 就是我们在this.state中定义的numericalValue

写vue的朋友就会习惯两对花括号 但react的插值表达式这是 单对花括号 {}

然后我们来演示动态修改this.state中的值

我们在这里写一个函数

increase(){
 this.setState({
    numericalValue: this.state.numericalValue+1
  })
}

界面上在写一个按钮来触发这个函数

render本身就也算一个生命周期函数 你可以直接把整个类里面理解成一个js区域 方法和变量 都是平级声明

大家可以看到 我们界面使用函数时也要加上this 不像vue 在界面上不需要使用this
这里我们bind(this) 是将这个函数中的this声明为组件本身的this 不然在事件中拿到的this就会是触发事件的元素本身了 这是个this指向的问题 你们如果感兴趣就可以去了解一下

然后我们的increase函数中使用了 react提供的 setState函数 在这个函数里就可以响应式修改state中声明的值
而我们在函数中使用state中的值 也要 this.state.属性
下面我们运行代码

可以看到 点一下 值就会被加一 没有任何问题