React 的状态值

State状态值

微信小程序中的 data 和 setData() 就是模仿的 React 的状态值机制.
React中:
• state: 保存的值 可以显示到页面上
• setState: 配合此方法, 更新数据同时 可以更新UI

// 状态值 state
//快捷命令，输入 rcc回车一下可以出现空白模板：
import React, { Component } from "react";

export default class App extends Component {
  // state 负责存储 界面上变化的值.  配合 setState 实现变化
  state = { num: 1 };
  doAdd = () => {
    this.setState({ num: this.state.num + 1 });
  };
  doMinus = () => {
    this.setState({ num: this.state.num - 1 });
  };
  render() {
    return (
      <div>
        <button onClick={this.doMinus}>-</button>
        <div>{this.state.num}</div>
        <button onClick={this.doAdd}>+</button>
      </div>
    );
  }
}

State的更新作用

// setState 特殊用法

// rcc
import React, { Component } from "react";
export default class App extends Component {
  //setState()做两件事:  更新UI  和 更新数据

  num = 1; //实际使用时, 数据不放state 也可以利用 setState() 刷新页面
  doAdd() {
    this.num++;
    this.setState({}); //更新UI 不更新数据: 参数必须填, 空对象即可!
    console.log(this.num);
  }
  render() {
    return (
      <div>
        <button onClick={this.doAdd.bind(this)}>更新 {this.num}</button>
      </div>
    );
  }
}

总结：state 和 setState

数据变化 会同步影响UI 的数据 都应该存放在state中

setState() 来更新时数据, 同步就会刷新UI

setState() 具有更新UI的特征: 有时也用来调用 实现UI的刷新
样式

以上是米兔吖分享的基础知识点，如有不足，望路过的小伙伴在评论区留言，谢谢！