react数据操作

import React, { Component } from "react"
export default class State extends Component {
    constructor() {
        super()
        this.state = {
            name: '张三',
            num: 10,
            json: {
                story: "呼号浩特",
                hobby: '杏子'
            },
            arr:[
                <li>杏花</li>,
                <li>杏仁</li>,
                <li>杏树</li>,
                <li>杏皮</li>,
                <li>杏壳</li>
            ]
        }
    };
    changeName (v) {
        // this.state.name=v
        // console.log(this.state.name);//但是不会引起页面的重新渲染
        // 如果要让页面重新渲染要使用 setstate方法
        this.setState({
            name: v
        })
    }

    changesex () {
        // 自加1
        // this.setState({
        //     num: ++this.state.num //++只能在前 不能在后（详解++在前和在后的原理）
        // })

        // 自加10 setState是异步操作  console.log()是同步操作  典型难忘
        this.setState({
            num:this.state.num+10
        })
        console.log(this.state.num);
    }
    changehobby (v) {
        //错误方式1
        // this.state.json.hobby=v //直接修改肯定是不行的
        //错误方式2
        // this.setState({
        //     json:{
        //         hobby:v //修改了  但是json就一个值了  
        //     }
        // })



        //正确方式1
        // 1、取出来(全部)
        // var hb = this.state.json
        // // 2、修改
        // hb.hobby = v
        // // 3、放回去
        // this.setState({
        //     json:hb
        // })

        //正确方式2
        this.setState({
           json:{
            ...this.state.json,
            hobby:v
           }
        })


    }
    render () {
        return (
            <div>
                <p>{this.state.name}</p>
                <button onClick={() => this.changeName("李四")}>哈哈哈</button>


                <p>{this.state.num}</p>
                <button onClick={this.changesex.bind(this)}>++</button>

                <p>{this.state.json.story}</p>
                <p>{this.state.json.hobby}</p>
                <button onClick={this.changehobby.bind(this, '钵钵鸡')}>吃饭</button>

                {
                    this.state.arr
                }
            </div>
        )
    }
}