React（3）语法学习{状态、setState刷新DOM、setState具有异步性、样式的使用、图片、条件渲染、双向绑定}

一、状态

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具有异步性