React The react component communicates with the props props (context mobx redux) as read-only and cannot be modified. You can only do receive using the current component how do you use state and modify state so let's look at the contentCopy the code

Create a new page

react/first-react/src/App.js

1The importimport State from './views/State';

2Introduction of < the State / >Copy the code

Corresponding file

Vi SRC/views/State/index. The JSX in addition to the render function We are a new one todayconstructor

constructorThere are two main functions: 1.stateInitialization 2. State instances (covered in the event content section) so let's start looking at the codeconstructor(props) {super(props)
    this.state = {
        'name':'yuan fang',}}render(){
    // You can use this.state.name directly
    // Props are the same,
    // We all know we need to refactor code
    let {name} = this.state;
    return(
        <div>
            <h3>state</h3>The name is: {this.state.name}<br/>
            {name}<br/>
        </div>} now all we're going to do is change the name to touch another periodic function componentDidMount which we'll talk about in the lifecycle section is basically mount completion, ajax request method initialization and timer settingcomponentDidMount(){
    this.setState({
        name:'jin'})} The only way to change state is if setState does notthis.state.name = ' 'You can't do that and you need setState so the first way to do setState is to assign directlythis.setState({
    name:'1'}) Now comes the questionconstructor 中
this.state = {
    'info': {'name':'Ming'.'age':32}} Now we want to change the name age in info directly or leave it unchanged if there is more informationthis.setState({
    'info': {'name':'gold'}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}this.setState({
    info:Object.assign({},
        this.state.info,
        {name:'Li Yuanfang'})}) What else is there to do?this.setState({
    info: {... this.state.info,name:'Li Yuanfang'}) we can change the value of a single state and a single value of an object. So the second way is to modify a value in the state object by merging the objectsCopy the code
According to the official website, setState may be asynchronous, so we are normalthis.setState({
    info: {... this.state.info,age:32+1}})console.log(this.state.info.age) sometimes we don't get this value and that's the problem if we want to change our value like age+1How to implementthis.setstate () receives a function//this.setState(function(state,props){
// console.log(state)
// console.log(props)
// return{
// info:{
/ /... _this.state.info,
// age:state.info.age+1
/ /}
/ /}
// })
// this.setState((state,props)=>{
// return{
// info:{
/ /... this.state.info,
// age:state.info.age+1
/ /}
/ /}
// })
this.setState((state,props) = >{
    return({
            info: {... this.state.info,age:state.info.age+1}})}) See the code change. The following code changes the way we use our values by accepting an arrow function that accepts the last value as an argumentthis.setState((state,props) = >({
    info: {... this.state.info,age:state.info.age+1}}))Copy the code

SetState considerations

SetState = setState; setState = setState; setState = setState; setState = setState; And if you have one or more setStates in each function, it's normal to combine them. Render will only execute once. If you use setTimeout or ajax in between, render will execute onceCopy the code

The complete code

react/first-react/src/views/State/index.jsx
import React, { Component } from 'react';

class View extends Component {
    constructor(props){
        super(props)
        this.state = {
            'name':'yuan fang'.'info': {'name':'Ming'.'age':32}}}changeInfo(){
        this.setState({
            name:'little red'.info: {name:'Li Yuanfang'.age:32
            },
            // info:{
            / /... this.state.info,
            // name:' Li Yuanfang '
            // }
            info:Object.assign({},
                this.state.info,
                {name:'Li Yuanfang'})})}addAge(){
        // let _this = this;
        // this.setState(function(state,props){
        // console.log(state)
        // console.log(props)
        // return{
        // info:{
        / /... _this.state.info,
        // age:state.info.age+1
        / /}
        / /}
        // })
        // this.setState((state,props)=>{
        // return{
        // info:{
        / /... this.state.info,
        // age:state.info.age+1
        / /}
        / /}
        // })
        this.setState((state,props) = >{
            return({
                    info: {... this.state.info,age:state.info.age+1}})})this.setState((state,props) = >({
            info: {... this.state.info,age:state.info.age+1}}}))componentDidMount(){
        this.changeInfo();
        this.addAge();
    }
    render(){
        let {info,name} = this.state;
        return(
            <div>
                <h3>state</h3>The name is: {this.state.name}<br/>The name is: {info.name}<br/>Age is: {info.age}<br/>
            </div>)}}export default View;

Copy the code