从上一节React从入门到架构(4)–基于Antd项目,初探React的Props后,我们已经认识了props
的作用,主要用于父组件和子组件之间的数据传递。
这一节介绍一下state。
先明确一个概念:
和props
不同的是,state
表示的是状态。
【属性】是依赖于外部的数据传递;
而【状态】是自身内部的改变。
阮一峰说过一句话:“Web是一个状态机”
意思就是,在Web中,我们需要把每一个界面中元素的变化,看作是一次状态的更新
(1)计数器设计
比如:我们写一个计数器,数值num
的初始是0
,每按一次Button
,数据就进行+1
的操作。
从状态机的角度应该这么理解:初始化时,我的第一个状态中,计数器num=0,当我通过点击按钮后,计数器就进入了第二个状态,此时的num=1,以此循环
Created with Raphaël 2.2.0
开始
num = 0
点击按钮
num++
每点击一个按钮,状态其实就更新一次。
(2)计数器实现
- 首先,我们在
ContentPage
中,将TablePage
重新加载进去,然后在TablePage
中实现计数器。 - 根据之前的分析,我们的状态改变,主要是
num
这个数值的变化,那么我们就把num
设置为state
,看代码:
TablePage.jsx:
import React, { Component } from 'react'
import { Button, Row, Col } from 'antd'
export default class componentName extends Component {
constructor() {
super();
this.state = {
num: 0
}
}
render() {
return (
<div>
<Row>
<Col span={24}>
<p></p>
<p>My num is {this.state.num}</p>
</Col>
</Row>
<Row>
<Col span={24}>
<Button>num++</Button>
</Col>
</Row>
</div>
)
}
}
界面显示如下:
- 接下来,我们为按钮添加一个
鼠标单击响应事件onClick
,然后让这个响应事件去执行一个handleClick函数
- 这个
handleClick函数
,应该可以触发状态的更新,对num
进行+1
的操作。
如图所示,这样修改以后就实现了计数器的功能啦~
注意几个要点:
- 页面的重新渲染,也就是状态的改变,需要靠修改
state
来触发; - 我们可以设置
state
的初始值,在界面初次装载渲染的时候调用 - 修改
state
的方法只有一种,就是调用setState()
函数; - 如果组件中包含了子组件,父组件重新渲染时,也会触发子组件的渲染,
props
会重新传入一次。
针对上述几个要点,我们有状态的更新、装载等,下节课将详细讲一讲,这些动作执行前后,我们可以做什么。