持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第15天，点击查看活动详情
上一篇文章我们介绍React的创建组件方式以及React事件处理，接下来将介绍React组件中的state和setState的基本使用以及事件绑定中的this指向问题
- 组件中state的基本使用
- 状态（state）就是指数据，是组件内部的私有数据状态(state)即数据，只能在组件内部使用 state的值是对象，表示一个组件中可以有多个数据，示例代码如下所示：
class Hello
extends React.Component
constructor(){
super (
//初始化state
this.state =
count:o
render ()
return
<div>有状态组件</div>
}
}
- 状态即数据，状态是私有的，只能在组件内部使用，React中可以通过this.state来获取状态，示例代码如下所示：
class Hello extends React.Component
/简化语法
state=
count:0
render ()
return{
<div>有状态组件，{this.state.count}</div>
}
}
}
- 组件中使用setState()修改状态
- 状态是可变的
- 语法：this.setState(《要修改的数据)
- 注意：不要直接修改state中的值，这是错误的
- setState()的作用：一是修改state二是更新UI
- 思想：数据驱动试图
//正确的写法：
this.setState({
count : this.state.count + 1
})
//错误的写法：
this.state.count += 1
- 从JSX中抽离时间处理程序
- JSX中掺杂过多的js逻辑代码，会显得整体非常混乱
- 推荐方法：将逻辑抽离到单独的方法中，保证JSX结构清晰
- 原因：事件处理程序中this的值为undefined
- 希望：this指向组件实例（render方法中的this即为组件实例）
- 事件绑定this指向
- 箭头函数：利用箭头函数自身不绑定this的特点
- render()方法中的this为组件实例，可以获取到setState()
- 示例代码如下：
class Hello extends React.Component
onIncrement ()
this.setState({…})
render ()
//箭头函数中的this指向外部环境，此处为：render()方法
return
<button onclick={()=this.onIncrement ()}></button>
}
}
