React 基础 - 05 （state状态值、style、class样式）

1、state状态值

        vue中，对于数据，属性都进行了监听，实时的监听数据的变化，刷新DOM，属性监听过多时，自动生成很多监听器，性能就会低一些

        react：需要时再去渲染DOM，没有自动监听器

        react提供了两个数据|状态的方法：

                setState：设置 / 修改数据

                state ：获取数据

        setState异步性，提高渲染性能，不阻塞，setState(参数1.参数2)：

                参数1：需要修改的state属性，对象格式

                参数2：回调方法，DOM渲染完成之后调用

import React, { Component } from 'react'

export default class App extends Component {
  state={
    num :1
  }
  doChange(){
    this.setState({num:100},()=>{
      console.log('页面渲染完毕：',this.state.num)
    })
    console.log('num:',this.state.num)   //先输出：num:1   再输出：页面渲染完毕:100
  }
  render() {
    return (
      <div>
        <h2>{this.state.num}</h2>
        <button onClick={()=>{this.doChange()}}>点击修改num</button>
      </div>
    )
  }
}

2、style、class样式

        引入css样式：import './App.css'

        使用类名：className="success"

       style的使用：style={{color:'red',fontSize:'20px'}}

import React, { Component } from 'react'
//引入css文件
import './App.css'

export default class App extends Component {
  render() {
    return (
      <div>
        <div style={{color:'red',fontSize:'20px'}}>hello</div>
        <div className="success">hello</div>
      </div>
    )
  }
}

/* App.css */
.success{
  background-color: green;
  color: white;
  border-radius: 10px;
}