reaccionar de la setstate () de la dos vías

reaccionar sólo quieren actualizar la vista con setstate (método) 

Sobre setstate () Aquí hay tres cosas que necesita saber

1. No actualizar el estado directamente, pero el uso setstate ()

2. Los cambios de estado pueden ser asíncrono

Reaccionar pluralidad de la llamada setstate () se pueden combinar en una llamada para mejorar el rendimiento.

3. this.props y this.state puede ser asíncrona actualización, no deben confiar en ellos para calcular el valor de estado siguiente.

Utilice segunda forma setstate () para aceptar una función en lugar de un objeto.

La función recibe el estado anterior como el primer parámetro, los puntales cuando esta actualización se aplica como el segundo argumento

Consulte con el funcionario estatal

La primera: el cambio directo 

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      msg: "my first react"
    };
  }
  changeHandle = () => {
    this.setState({
      msg: "我被改变了"
    });
  };
  render() {
    return (
      <div>
        <h1>{this.state.msg}</h1>
        <button onClick={this.changeHandle}>改变页面</button>
      </div>
    );
  }
}

export default App;

La segunda: por setstate pasar () en una función, este uso con los valores cambia, por medio del estado original de los datos por defecto

​
import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      msg: "my first react"
    };
  }
  // 点击事件回调
  changeHandle = () => {
    // 第一种
    // this.setState(state => {
    //   return {
    //     msg: "hello"
    //   };
    // });

    // 简写
    this.setState(state => ({ msg: "hello world" }));
  };
  render() {
    return (
      <div>
        <h1>{this.state.msg}</h1>
        <button onClick={this.changeHandle}>改变页面</button>
      </div>
    );
  }
}

export default App;

​

Por ejemplo: setstate () utiliza la escena de entrada (si existe tal demanda, es necesario enumerar su rendimiento de datos, haga clic en cuál de los datos, cambiar el icono de cuál de los datos)

Se instaló un  reaccionan-iconos icono de la biblioteca

import React, { Component } from "react";
import { MdFavorite, MdFavoriteBorder } from "react-icons/md";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [
        {
          id: 1,
          title: "学习react",
          isLike: false
        },
        {
          id: 2,
          title: "学习vue",
          isLike: false
        },
        {
          id: 3,
          title: "学习NG",
          isLike: false
        }
      ]
    };
  }
  handleClick(index) {
    this.setState(state => {
      state.list[index].isLike = !state.list[index].isLike;
      return {
        list: state.list
      };
    });
  }
  render() {
    const { list } = this.state;
    return (
      <div>
        <ul>
          {list.map((item, index) => (
            <li key={item.id} onClick={() => this.handleClick(index)}>
              {item.title}
              {item.isLike ? (
                <MdFavorite style={{ color: "#f00", marginLeft: 30 }} />
              ) : (
                <MdFavoriteBorder style={{ color: "#f00", marginLeft: 30 }} />
              )}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default App;