react in the setState () of the two way

react only want to update the view with setState () method 

About setState () Here are three things you need to know

1. Do not update the status directly, but use setState ()

2. Status updates can be asynchronous

React plurality of the setState () call can be combined into a call to improve performance.

3. this.props and this.state may be asynchronous update, you should not rely on them to calculate the value of the next state.

Please use setState second form () to accept a function rather than an object.

The function receives the previous state as the first parameter, the props when this update is applied as the second argument

Refer to the official state

The first: direct change 

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;

The second: by setState () pass in a function, this usage with the values ​​you change, by means of the original state in the default data

​
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;

​

For example: setState () method uses the incoming scene (if there is such a demand, you need to list your data rendering, click on which of the data, icon change which of the data)

Installed a  react-icons icon library

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;