React 类组件 State

类组件里的 State

• 如果数据需要修改，并且需要⻚页⾯同时响应改变，那就需要把变量 放在state⾥⾯，同时使⽤setState修改 初始化状态state;
• 组件自己的数据 类组件里的State状态(只有class组件有state，函数组件需要用useSata这个Hooks来调用).

• 初始化状态

this.state = { count: 0 };

• 更新状态 更新状态使⽤setState,不能直接this.state.count=xxx

this.setState({ count: this.state.count + 1 });

// 定义类组件
class my extends Component{
constructor(){
    // constructor构造函数不是必须写的，但是写了constructor函数，构造函数里必须用super，新版reactreact不用传props，框架内部已经传好了，直接使用就行。
super()
this.state={feeling:'不好'} // 定义初始化状态
}
// render负责渲染 想渲染什么通过render里面的 return 写jsx
render(){
    return <>
    <div>我今天心情{{this.state.feeling}}</div>
    </>
}
}
render(<my/>,document.getElementById('rood'))
// <my></my> 可以单标签也可以双标签，
// 如果同时渲染两个组件，也要用一个标签包裹起来<><my/><you/></>

组件里使用事件

第一种写法

• （bind是最老的写法）

class My extends Component {
    constructor() {

        super()
        this.state = { feeling: '不好' }
    }
    handleClick() { //定义的事件
        alert(1)
    }
    render() {
        return <>
            <div>我今天心情{this.state.feeling}</div>
            <button onClick={this.handleClick.bind(this)}>点击改变心情</button>
        // 用bind防止丢失this
        </>
    }
}
render(<My></My>, document.getElementById('rood'))

第二种写法（通过es7解决this问题）

• 最方便，最优雅的写法（推荐使用）

class my extends Component {
    constructor() {
        super()
        this.state = { feeling: '不好' }
    }
    handleClick = () => { //定义的事件(箭头函数将this指向上一级)
        alert(1)
    }
    render() {
        return <>
            <div>我今天心情{this.state.feeling}</div>
            <button onClick={this.handleClick}>点击改变心情</button>
        </>
    }
}
render(<my></my>, document.getElementById('rood'))

或者

import React from 'react';
import { render } from 'react-dom';
class Counter extends React.Component {
    constructor() {
        super()
        this.state = { number: 1 }
    }
    add() {
        // 事件
        alert(1)
    }
    render() {
        return <>
            <div>{this.state.number}</div>
            <button onClick={() => this.add()}>点击加1</button>
        </>

    }
}
render(<Counter></Counter>, window.root)

第三种写法(事件定义在构造函数里)

• 性能最好的写法

class My extends Component {
    constructor() {
        super()
        this.state = { feeling: '不好' }
        this.handleClick = function () { //定义的事件(在构造函数里赋值一次，构造函数this指向当前实例不会丢失)
            alert(1)
        }
    }

    render() {
        return <>
            <div>我今天心情{this.state.feeling}</div>
            <button onClick={this.handleClick}>点击改变心情</button>
        </>
    }
}
render(<My></My>, document.getElementById('rood'))

修改state

• 改变state状态（setState({})方法）

class Sul1 extends React.Component {
    constructor(props) {
        super(props);
        this.state = { time: new Date().toLocaleString() }
    }
    //组件已经挂载
    componentDidMount() {
        setInterval(() => {
            this.setState({
                time: new Date().toLocaleString()
            })
        }, 1000);
    }
    render() {
        return <div>
            类组件显示 当前时间是{this.state.time}
        </div>
    }
}

例：

class My extends Component {
    constructor() {
        super()
        this.state = { feeling: '不好' }
    }
    handleClick = () => { //箭头函数的方法
        // react 类组件的 state 状态修改必须通过this.setState({})方法
        this.setState({ feeling: '非常好' })
    }
    render() {
        return <>
            <div>我今天心情{this.state.feeling}</div>
            <button onClick={this.handleClick}>做了XX事心情变{this.state.feeling}了</button>
        </>
    }
}
render(<My></My>, document.getElementById('rood'))

State 异步语法

当执行以下代码时，并不能从1增加到3也就是两个函数，只执行了一个。

import React from 'react';
import { render } from 'react-dom';
class Counter extends React.Component {
    constructor() {
        super()
        this.state = { number: 1 }
    }
    add() {
        // 事件
        // this.setState是异步的，
        this.setState({ number: this.state.number + 1 })
        this.setState({ number: this.state.number + 1 })
        // this.forceUpdate()   //不管数据有没有改变，都强制更新
        console.log(this.state);
    }
    render() {
        return <>
            <div>{this.state.number}</div>
            <button onClick={() => this.add()}>点击加1</button>
        </>
    }
}
render(<Counter></Counter>, window.root)

用上面的方法，因为setState()方法时异步执行的，so 当第二个setState()执行时，原值还是1，并没有增加到2。所以增加的值是2. 但是通过prevState参数，加1后，就可以从1加到3 两个方法都执行了，所以是加到了3.

setState是异步的，底层设计同⼀个⽣命周期会批量操作更新 state. setState第⼆个参数是⼀个可选参数，传⼊⼀个回调函数可以获取到最新的state,当修改的state依赖上⼀次修改的state的值时，可使⽤以下这种⽅法修改.

this.setState((prevState, prevProps)=>({

//prevState：上⼀次修改的状态state //prevProps：上⼀次修改的属性props count: prevState.count + 1

}), () => {

//这⾥可以获取到最新的state console.log(this.state.count);

});

import React from 'react';
import { render } from 'react-dom';
class Counter extends React.Component {
    constructor() {
        super()
        this.state = { number: 1 }
    }
    add() {
        // 事件
        this.setState((prevState) => ({
            number: prevState.number + 1
        }), () => {
            // 第二个回调函数能拿到state最新的值
            console.log(this.state);
        })
        this.setState((prevState) => ({
            number: prevState.number + 1
        }))
        // prevState表示的是上一次的状态
    }
    render() {
        return <>
            <div>{this.state.number}</div>
            <button onClick={() => this.add()}>点击加1</button>
        </>
    }
}
render(<Counter></Counter>, window.root)

• forceUpdate():强制更新状态(如果没有特殊情况，不建议使用)

 this.state.number +=1
    this.forceUpdate() //不管数据有没有改变 都进行强制更新
    console.log(this.state)