react 中 state 的基本使用

Posted 2021-12-20 冰雪奇缘lb

有状态组件和无状态组件

• 函数组件又叫做 无状态组件，类组件又叫做 有状态组件
• 状态( state )即 数据
• 函数组件没有自己的状态，只负责数据展示(静)
• 类组件有自己的状态，负责更新Ul，让页面“动”起来

比如计数器案例中，点击按钮让数值加1。0和1就是不同时刻的状态，而由0变为1就表示状态发生了变化。状态变化后，UI也要相应的更新。React中想要实现该功能，就要使用有状态组件来完成。

---

state的基本使用

• 状态( state )即数据，是组件内部的私有数据，只能在组件内部使用
• state的值是对象，表示一个组件中可以有多个数据
• 通过 this.state 来获取状态
  

class App extends React.Component 
    // constructor() 
    //     super()

    //     // 初始化state
    //     this.state = 
    //         count: 0
    //     
    // 

    // 简化语法初始化state  【推荐】
    state = 
        count: 0,
    
    render() 
        return(
            <div>
                <h1>计数器：this.state.count</h1>
            </div>
        )
    


// 渲染组件
ReactDOM.render(<App />, document.getElementById("root"))

---

setState修改状态

• 状态是可变的
• 语法：this.setState( 要修改的数据 )
• 注意：不要直接修改 state 中的值，这是错误的！！！
• setState() 作用：1. 修改state 2. 更新UI
• 思想：数据驱动视图
  

class App extends React.Component 

    // 简化语法初始化state  【推荐】
    state = 
        count: 0,
    
    render() 
        return(
            <div>
                <h1>计数器：this.state.count</h1>
                <button onClick = () => 
                    this.setState(
                        count: this.state.count + 1
                    )
                >+1</button>
            </div>
        )
    


// 渲染组件
ReactDOM.render(<App />, document.getElementById("root"))

---

从JSX中抽离事件处理程序

• JSX中掺杂过多JS逻辑代码，会显得非常混乱
• 推荐：将逻辑抽离到单独的方法中，保证JSX结构清晰
  
• 原因：事件处理程序中 this的值为undefined
• 希望： this 指向组件实例( render方法中的this即为组件实例)

事件绑定this指向

1. 箭头函数

• 利用箭头函数自身不绑定this的特点
• render)方法中的 this为组件实例，可以获取到 setState)
  
  2. Function.prototype.bind()
• 利用 ES5 中的 bind 方法，将事件处理程序中的 this 与组件实例绑定到一起
  

class App extends React.Component 

    constructor() 
        super()
        this.state = 
            count: 0,
        
        this.onIncrement = this.onIncrement.bind(this)
    
    // 事件处理程序
    onIncrement() 
        console.log('事件处理程序中的this：', this)
        this.setState(
            count: this.state.count + 1
        )
    

    render() 
        return(
            <div>
                <h1>计数器：this.state.count</h1>
                <button onClick =  this.onIncrement >+1</button>
            </div>
        )
    


// 渲染组件
ReactDOM.render(<App />, document.getElementById("root"))

3. class的实例方法

• 利用箭头函数形式的class实例方法
• 注意∶该语法是实验性语法，但是，由于babel的存在可以直接使用
  

class App extends React.Component 

    state = 
        count: 0,
    
        
    // 事件处理程序
    onIncrement = ()=> 
        console.log('事件处理程序中的this：', this)
        this.setState(
            count: this.state.count + 1
        )
    

    render() 
        return(
            <div>
                <h1>计数器：this.state.count</h1>
                <button onClick =  this.onIncrement >+1</button>
            </div>
        )
    


// 渲染组件
ReactDOM.render(<App />, document.getElementById("root"))