react usestate局部更新

转载

blueice 2024-09-27 08:20:14

文章标签 react usestate局部更新 antd react state 状态 文章分类 架构后端开发

从上一节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>
   )
 }
}

界面显示如下：

react usestate局部更新_状态