Reast自学篇-4

阿巴阿巴

突然感觉最近很emo

状态

关于什么是状态

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

以下实例创建一个名称扩展为 React.Component 的 ES6 类，在 render() 方法中使用 this.state 来修改当前的时间。

添加一个类构造函数来初始化状态 this.state，类组件应始终使用 props 调用基础构造函数。

组件的状态就和我们前面说的类组件有关了，我们在上一章讲到了，函数组件是无状态的（除非用hook），类组件才有状态，有了状态，我们才能对里面的数据进行动态修改，否则就和常量一样，渲染即为固定了

React渲染状态

这里是本人个人理解哈，不代表最终效果

React在对组件进行操作的时候，就需要定义状态了，我们需要提前去对一个组件进行定义，比如这样

在这里，我们对于状态的定义就需要包含名字,学号等信息，状态就是用于存放这些的”变量”的，因此在设计组件的时候，就需要及时的去定义

至于定义的方法可以看这里

如何定义状态(state)

定义状态的代码如下

class OPENButton extends React.Component {
    state = {
        type: false
    }
    render () {
        return (
            <div>
                <div>
                    当前组件状态为:{String(this.state.type)}
                </div>
            </div>
        )
    }

}

看起来就像定义了一个map?其实也差不多，React中利用变量state来存放我们对应的变量，同时，在这里面的变量被修改后才会被刷新

如何调用这些变量呢？

调用这些变量的不能直接调，需要加上this才可以调用，不然会空指针，同时，state只能存在于组件之中，不能存在外面(这也从另一个方面说明组件与状态的绑定关系)，我们具体来看下如何调用

import React from "react"
class OPENButton extends React.Component {
    state = {
        type: false
    }
    render () {
        return (
            <div>
                <div>
                    当前组件状态为:{String(this.state.type)}
                </div>
            </div>
        )
    }
}
function App2 () {
    return (
        <div>
    <OPENButton></OPENButton>   
        </div>
    )
}
export default App2

this.state.type这里就是调用了，我们这里必须要this去调用，并且通过.去获取内部的内容（当然还是要走JSX）

如何修改这些变量

修改这些变量其实就是对整个组件进行修改渲染,具体流程如下

当调用setState时，会重新执行render函数，根据最新的State（就是我们用this调用哪个）来创建ReactElement对象；然后再根据最新的ReactElement对象，对DOM进行修改

当然，我们具体到代码层，就是调用个代码的事情this.setState({key,value})

[scode type=”yellow”]务必注意，千万别去直接修改state的值，不然没法刷新对象[/scode]

我们看下代码，就很简单了

import React from "react"
class OPENButton extends React.Component {
    state = {
        type: false
    }
    switchType = (e, numbers) => {
        console.log(e)
        console.log(numbers)
        if (this.state.type === false) {
            this.setState({ type: true })
        } else {
            this.setState({ type: false })
        }
    }
    render () {
        return (
            <div>
                <div>
                    当前组件状态为:{String(this.state.type)}
                </div>
                <button onClick={(e) => this.switchType(e, 122)}>切换组件状态</button>
            </div>
        )
    }
}
function App2 () {
    return (
        <div>
            <OPENButton></OPENButton>

        </div>
    )
}
export default App2

当我们点击按钮后，我们的this.state.type就会改变，从而修改我们div中输出的内容

最终效果，就变成这样了

这就完成了组件的修改，简单吧（笑）