React组件中的state

状态

React组件中 通过state管理组件内部状态 类Vue中的data

// rcc 快捷方式
/***
 *  Vue  组件的数据存放在data  数据自动监听的 当数据发生改变会自动刷新DOM  如果数据很多 会创建大量的监听器 性能就会低一些
 * 
 *  React 需要的时候再去刷新DOM,没有自动监听器
 *  React提供了两个方法操作组件的状态:
 *  state 获取数据
 *  setState 设置修改数据  刷新DOM
 * 
 *  微信小程序 借鉴了react数据管理的写法
 *  data setData 
 * 
 * 
 */
import React, { Component } from 'react'

export default class App extends Component {
  // state初始化
  state = {num:1}
  // +1方法
  doAdd(){
    // 修改state数据
    // sst 快捷提示
    this.setState({num:this.state.num+1})
  }
  render() {
    return (
      <div>
        <h1>{this.state.num}</h1>
        <button onClick={this.doAdd.bind(this)}>点击+1</button>
      </div>
    )
  }
}

setState刷新DOM

// rcc
import React, { Component } from "react";

export default class App extends Component {
  // 普通成员属性
  num = 1;
  // 事件处理方法 num+1
  doAdd = () => {
    this.num++;
    console.log(this.num);
    // 使用setState刷新DOM 值必须传入{}
    this.setState({})
  };
  render() {
    return (
      <div>
        <h1>{this.num}</h1>
        <button onClick={this.doAdd}>点击+1</button>
      </div>
    );
  }
}

setState具有异步性

// rcc
import React, { Component } from 'react'

export default class App extends Component {
  // 存储成state属性还是使用普通类成员属性
  // 如果状态不需要渲染到DOM上,使用普通类成员属性就可以
  // 如果状态频繁发生改变并需要修改渲染DOM上,使用state
  state = {num:1}
  doChange(){
    // sst 快捷生成
    // setState参数结构(参数1,参数2)
    // 参数1:需要修改的state数据 对象格式
    // 参数2:回调方法 DOM渲染完毕之后调用
    // setState 修改state属性操作 是异步的  非阻塞 提高性能
    // 如果业务操作中,有需求是需要修改state状态后操作的,这个操作就需要写在回调方法里
    this.setState({num:100},()=>{
      console.log('页面渲染完毕num:',this.state.num);
    })
    // 修改后打印state值
    console.log('num:',this.state.num);
  }
  render() {
    return (
      <div>
        {/* 这里方法调用加() */}
        {/* 事件触发的方法 当事件触发时 再调用 不加() */}
        {/* <button onClick={this.doChange}></button> */}
        {/* 箭头函数触发 事件触发了箭头函数,箭头函数要立即调用普通函数方法 */}
        <button onClick={()=>this.doChange()}>{this.state.num}</button>
      </div>
    )
  }
}