React状态(state)组件、this指向问题

一、有状态组件和无状态组件

1、概念

• 函数组件叫做无状态组件；类组件叫做有状态组件
• 状态 （state），组件中使用的数据都保存在 state 中，并且是组件的私有数据
• 函数组件没有自己的状态，只负责数据展示（静）
• 类组件有状态，负责动态展示 UI 界面 （动）

2、state的基本使用

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

state用来为组件绑定私有数据，有两种绑定形式

第一种： 在构造函数中定义 state

第二种： 在类中直接定义state （推荐）

2.1 在构造函数中定义 state

class App extends React.Component {
  // 使用构造函数定义数据
  constructor () {
    super ()
    //初始化state
    this.state = {
     	count:0
    }
  }
}

2.2 在类中直接定义state

class App extends React.Component {
  // 定义state (数据)
  state = {
    count:0,
    number:1
  }
}

2.3 获取状态：this.state

 render (){
    return (
      <div>
        <h1>计数器：{this.state.count}</h1>
      </div>
      )
}

3.使用setState()方法修改数据

<button onClick={()=>{
          this.setState({
            count:this.state.count + 1
           // this.state.count + 1  //错误写法
          })}}
          >+1</button>

修改数据需要使用到 setState() 方法，方法内是一个对象参数，要修改哪个数据写哪个数据即可，千万不要直接修改state中的值！

案例：将上例button按钮上注册点击事件，点击按钮，页面上的数值发生变化

import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
  // 定义state (数据)
  state = {
    count:0
  }
  number = () => {
    if (this.state.count === 10) {
      alert('计数器停止计数')
      return
    }
    this.setState({
      count: this.state.count + 1,
    })

  }
  render (){
    return (
      <div>
        <h1>计数器：{this.state.count}</h1>
        <button onClick={this.number}
          >+1</button>
      </div>
      )
}
}
//渲染组件
ReactDOM.render(<App/>, document.getElementById('root'))

效果：

二、this 的指向

1、this 的指向

在上例中如果将 onClick 指定的事件函数独立出来定义成一个函数则会报错，原因是因为事件处理程序中this的值为undefined

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

解决办法：

• 使用箭头函数代替传统函数
• 使用bind()方法修改this指向 this.number = this.number.bind(this)
• class实例方法

2、利用箭头函数解决this指向问题

利用箭头函数有自身不绑定this的特点，箭头函数中的this指向外部环境，本例中render()方法中的this为组件实例，可以获取到setState()

import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
  // 定义state (数据)
  state = {
    count:0
  }
  number(){
    console.log(this);
    this.setState({
      count: this.state.count + 1
    })
  }
  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'))

3、利用bind()方法解决this指向问题

import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
  // 定义state (数据)
  state = {
    count:0
  }
  constructor(){
    super()
    this.number = this.number.bind(this)
  }
  number(){
    console.log(this);
    this.setState({
      count: this.state.count + 1
    })
  }
  render (){
    return (
      <div>
        <h1>计数器：{this.state.count}</h1>
        <button onClick={this.number}>+1</button>
      </div>
      )
}
}
//渲染组件
ReactDOM.render(<App/>, document.getElementById('root'))

如果使用传统的函数定义方式，则需要使用bind()方法来修改this指向，需要将事件处理程序中的this与组件实例绑定在一起

4、利用class实例方法

根据箭头函数形式的Class 实例方法
注意：该语法是实验性语法，但是由于babel 的存在可以直接使用

import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
  // 定义state (数据)
  state = {
    count:0
  }
  number = () => {
    if (this.state.count === 10) {
      alert('计数器停止计数')
      return
    }
    this.setState({
      count: this.state.count + 1,
    })

 }
  render (){
    return (
      <div>
        <h1>计数器：{this.state.count}</h1>
        <button onClick={this.number}>+1</button>
      </div>
      )
}
}
ReactDOM.render(<App/>, document.getElementById('root'))

总结

• setState()作用：1.修改state 2.更新UI
• this指向：
  1.推荐使用class的实例方法

class Hello extends React.Component{
	number = ()=>{
		this.setState({...})
	}
}

2. 箭头函数

<button onClick={()=>this.number()}/>

3. bind

 constructor(){
    super()
    this.number = this.number.bind(this)
  }