react学习——state状态及事件处理

状态 state

• react中的内置属性
  在类里面定义变量 对象

import React, {
    Component } from 'react'
// state 状态  类似于 Vue 中的 data
export default class App extends Component {
   
  // 直接是一个对象
  state = {
   
    msg: '😀'
  }
  render() {
   
    return (
      <div>
        <h1>{
   this.state.msg}</h1>
      </div>
    )
  }
}

• 插件 react 里面的 dev-tools
  

• react里面内置了一个 setState方法
  实质是——重新执行了render方法，模板重新编译了一次，里面有diff算法，没更改的不会替换。后面讲。
• react 改变视图的最简单的方式。
• 例子1:App.js

import React, {
    Component } from "react";
export default class App extends Component {
   
  state = {
   
    msg: "😀",
  };
  // 使用箭头函数，没有this的问题
  handleClick = () => {
   
    // 直接改变state中的值是不会变化的
    // this.state.msg="📕"
    // console.log('消息未改变',this.state.msg);

    // 改变视图，有一个方法，直接用即可
    // 调用后，小括号中是一个对象
    // this.setState({})
    this.setState({
   
      msg: '🍉'
    })
    // 此时页面上和控制台里都变了
  };
  render() {
   
    return (
      <div>
        <h1>{
   this.state.msg}</h1>
        <button onClick={
   this.handleClick}>消息改变</button>
      </div>
    );
  }
}

状态定义的两种方式

1.类属性的方式

• 直接是类属性的方式

  state = {
   
    msg: "😀",
  };

2.构造函数中定义状态

• 在构造函数中定义

constructor(props){
   
    super(props) //super是干嘛用的？？
    this.state={
   
      msg:"哈哈"
    }
  }

• 两种定义状态的方式不能同时使用，会被覆盖。

多个状态的改变 批量更新

修改状态的两种方式

• 使用setState()方法后会重新渲染 render

1.setState()方法中传入对象

2.setState()方法中传入一个箭头函数

import React, {
    Component } from "react";
// 修改状态  的两种方式
export default class App extends Component {
   
  constructor(props){
   
    super(props) 
    this.state={
   
      msg:"哈哈"
    }
  }
  handleClick = () => {
   
    // 方式一 ：在setState方法中传入对象，直接改变需要改变的值
    // this.setState({
   
    //   msg:'🍉'
    // })
    // 方式二 ：传入一个箭头函数
    this.setState((preState)=>{
   
      // preState 是之前最新的值
      console.log(preState);
      // 箭头函数 return 一个对象，对象里面是改变的值
      return {
   
        msg:"🍉"
      }
    })
  };
  render() {
   
    return (
      <div>
        <h1>{
   this.state.msg}</h1>
        <button onClick={
   this.handleClick}>消息改变</button>
      </div>
    );
  }
}

setState()方法是异步的，批量处理的，那么怎么同步使用？

小问题：打印出来的是原来的值还是修改后的值呢？？

解释：

• 是之前的，做批量更新，异步执行的，所以this.setState()是异步的，打印是同步的。那么我想获得改变之后的值呢？？

获取改变之后的值有两种方式

1. 第一种方法 放在setTimeout 中执行 setState 获取到的值就是同步的了

2. 第二种方法 放在原生事件中 setState方法是同步的

import React,