React中关于State的一切

1.关于state的初始化

在生命周期constructor中，对state进行初始化

2.this.setState()

使用this.setState()方法来时刻更新组件的state

3.正确的使用State

• 不要直接修改State的值，而应该使用setState（）
• State的更新可能是异步的，查看counter的值是undifined

import React, { Component } from 'react'

function Home(props){
    return props.counter
}
export default class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            counter: 0
        }
    }

    handleClick = () => {
        this.setState({
            counter: this.state.counter + 1
        },()=>{
            console.log(this.state.counter);
        })
        // console.log(this.state.counter);
    }
    render() {
        return (
            <div>
                <h2>当前计数：{this.state.counter}</h2>
                <button onClick={this.handleClick}>+1</button>
                <br></br>
                <Home counter={this.state.counter}/>
            </div>
        )
    }
}

• setState的数据更新会被合并

state内部会对数据进行浅拷贝，因为深拷贝会影响性能。

import React, { Component } from 'react'

export default class App extends Component {
    constructor(props) {
        super(props)
        // 数据内部有object.assign()会对数据进行copy
        this.state = {
            counter: 0,
            type:"int"
        }
    }

    handleClick = () => {
        setTimeout(() => {
            this.setState({
                counter:this.state.counter + 1
            })
        }, 0);
    }
    render() {
        return (
            <div>
                <h2>当前计数：{this.state.counter}</h2>
                <h2>类型：{this.state.type}</h2>
                <button onClick={this.handleClick}>+1</button>
    
            </div>
        )
    }
}

4. setState本身的合并

实现了点击一次按钮，直接+3的效果。

import React, { Component } from 'react'

export default class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            counter: 0
        }
    }
    // 多次调用setstate会合并，相当于调用一次
    handleClick = () => {
        // this.setState({
        //     counter: this.state.counter + 1
        // })
        // this.setState({
        //     counter: this.state.counter + 1
        // })
        // this.setState({
        //     counter: this.state.counter + 1
        // })
        // 合并累加(prtvState,上一次的结果，累加上一次的结果)
        this.setState((prtvState,props)=>{
            return {
                counter: prtvState.counter+1
            }
        })
        this.setState((prtvState,props)=>{
            return {
                counter: prtvState.counter+1
            }
        })
        this.setState((prtvState,props)=>{
            return {
                counter: prtvState.counter+1
            }
        })
    }
    render() {
        return (
            <div>
                <h2>当前计数：{this.state.counter}</h2>
                <button onClick={this.handleClick}>+1</button>
            </div>
        )
    }
}

 5. 数据是向下流动的

不管是父组件或是子组件都无法知道某个组件是有状态的还是无状态的，并且它们也并不关心它是函数组件还是 class 组件。这就是为什么称 state 为局部的或是封装的的原因。除了拥有并设置了它的组件，其他组件都无法访问。