React state

最新推荐文章于 2023-08-24 10:12:11 发布

敢问

最新推荐文章于 2023-08-24 10:12:11 发布

阅读量114

点赞数

分类专栏： react 文章标签： reactjs

本文链接：https://blog.csdn.net/weixin_41040445/article/details/125765259

版权

react 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文详细介绍了React中组件状态(state)的使用，包括如何在类组件中初始化和更新state，以及如何在函数组件中利用Hooks管理状态。同时，通过实例展示了数据双向绑定在React input表单中的实现，探讨了state变化与视图更新的关系。

摘要由CSDN通过智能技术生成

基本使用

state 是组件自身的一个状态，组件内部自己的数据。

组件的加载流程（组件的生命周期函数）

首先执行组件的构造器 constructor() 处理组件内部的状态

其次执行 render() 得到一个虚拟DOM

最后执行 componentDIdMount() 插入我们的真实DOM

类组建

class App extends React.Component {
    constructor(){
        super()
        //添加state状态
        this.state = {
            name:"mashibing"
        }
    }
    render(){

        return <div>
            <span>{this.state.name}</span>
        </div>
    }
}
ReactDOM.render(<App/>,document.getElementById("app"))

函数组建

函数组件不能直接添加state属性使用 Hooks

state的注意

state 是组件内部的数据状态
读取state状态直接使用 this.state
更改state 需要使用 this.setSate()
- this.setSate() 它是异步的

class App extends React.Component{
            constructor(){
                super()
                this.click = this.click.bind(this)
                this.state = {
                    name:'张三'
                }
            }
            click(){
               this.setState({
                    name:'李四'
               })
            }
            render(){
                console.log(this)
                return <div>
                        <h1>{this.state.name}</h1>
                        <button onClick = {this.click}> 点击修改state</button>
                    </div>
            }
        }
        ReactDOM.render(<App/>,document.getElementById('app'))

数据双向绑定

组件内部的state状态发生改变，更新视图中元素的状态，视图中元素的状态发生改变也会影响组件中state的状态。

input 表单演示数据双向绑定

        class App extends React.Component{
            constructor(){
                super()
                this.change = this.change.bind(this)
                this.state = {
                    name:'张三'
                }
            }
            change(event){
                this.setState({
                    name:event.target.value
                })
            }
            render(){
               
                return <div>
                        <span>{this.state.name}</span>
                        <div>
                            <input type="text" onChange = {this.change} value={this.state.name} />    
                        </div>
                    </div>
            }
        }
        ReactDOM.render(<App/>,document.getElementById('app'))