React 之 内置方法setState改变state(一)

news/2024/10/18 18:19:21/

简述

  1. this.setState 方法是React组件类(React.Component 的子类)的一个内置方法。当你在创建一个React组件类时,你继承自 React.Component,因此你的组件类会自动获得this.setState 方法。
  2. this.setState 用于更新组件的state。当state更新时,React会重新渲染该组件及其子组件。

使用this.setState代码栗子:

//以下为组件 Board 的代码(一个React 组件类对象)
class Board extends React.Component {//构造函数来初始化 state(状态)//在 JavaScript classes(类)中, 在定义子类的构造函数时,你需要始终调用 super 。	          			   //所有具有 constructor 的 React 组件类都应该以 super(props) 调用启动它。constructor(props) {super(props);this.state = {  //等同于vue的data属性squares: Array(9).fill(null),};}handleClick(i) {  //等同于vue2的method属性内定义的方法const squares = this.state.squares.slice();squares[i] = 'X';//调用内置方法this.setState更新数据状态this.setState({squares: squares});}renderSquare(i) {return (//这里的Square 是另外一个组件,这里没写<Square   value={this.state.squares[i]}onClick={() => this.handleClick(i)}/>);}render() {const status = 'Next player: X';// 以下等同于vue的模版template,  XML 的标签。你的组件告诉 React 你要呈现的内容return (   <div><div className="status">{status}</div><div className="board-row">{this.renderSquare(0)}{this.renderSquare(1)}{this.renderSquare(2)}</div><div className="board-row">{this.renderSquare(3)}{this.renderSquare(4)}{this.renderSquare(5)}</div><div className="board-row">{this.renderSquare(6)}{this.renderSquare(7)}{this.renderSquare(8)}</div></div>);}
}

http://www.ppmy.cn/news/1441347.html

相关文章

golang反射

go反射 反射基本介绍应用场景基本使用结构体注意练习最佳实践遍历结构体的方法&#xff0c;调用接头体的方法&#xff0c;获取结构体的标签 反射 基本介绍 反射可以在运行时动态获取变量的各种信息&#xff0c;比如变量的类型(type)、类别(kind)如果是结构体变量&#xff0c;…

IDEA->EasyCode(mapper.xml) 字段无逗号分割问题

IDEA-&#xff1e;EasyCode(mapper.xml) 字段无逗号分割问题_easycode allsqlcolumn 没有逗号-CSDN博客 在easycode的设置里找到&#xff1a; 1、Template下的 mapper.xml.vm脚本 2、Global Config下的 mybatisSupport.vm脚本 然后将这两个脚本里的 $velocityHasNext 替换成 …

深入探索计算机视觉:高级主题与前沿应用的全面解析

引言 计算机视觉&#xff0c;作为人工智能领域的一个重要分支&#xff0c;旨在让计算机能够“看”懂世界&#xff0c;理解和解释视觉场景。随着深度学习技术的迅猛发展&#xff0c;计算机视觉已经在许多领域取得了显著的进展&#xff0c;如自动驾驶、安防监控、医疗诊断等。在…

git 操作命令笔记与规范

场景说明 user:个人用户分支&#xff1b;dev:开发分支&#xff1b; 1、从dev分支拉取最新代码 2、将最新dev代码合并到user个人分支 3、将编辑的个人代码提交 4、gitlab上发起请求合并-指定审核人员 #切换到dev分支 git checkout dev git branch #拉取最新dev代码 git pu…

C++并发编程 - 线程管理

目录 等待线程的完成 传递参数 属性API Reference 我们的std::thread对象就是在创建的时候方才执行函数&#xff0c;而不是使用某一个类似于run的API执行。这使得我们启动一个线程的方式变得很简单&#xff1a; void task(void); // A demo std::thread(task); 我们这样就…

ubuntu的镜像源+bionic版本

首先第一步 查找和你自己ubuntu版本匹配的版本号 匹配代号如下 在终端输入lsb_release -a查看自己系统上的版本号 可以看到我这个版本号的代号是bionic。 每个版本的镜像文件都是有规律的。 bionic版本的源如下 # 阿里源 deb http://mirrors.aliyun.com/ubuntu/ bionic ma…

Day17.一刷数据结构算法(C语言版) 654最大二叉树;617合并二叉树;700二叉搜索树中的搜索;98验证二叉搜索树

又是破防的一天...... 一.654最大二叉树 又是构造二叉树&#xff0c;昨天大家刚刚做完 中序后序确定二叉树&#xff0c;今天做这个 应该会容易一些&#xff0c; 先看视频&#xff0c;好好体会一下 为什么构造二叉树都是 前序遍历 题目链接&#xff1a;最大二叉树 文章讲解&…

【力扣】18. 四数之和

18. 四数之和 题目描述 给你一个由 n 个整数组成的数组 nums &#xff0c;和一个目标值 target 。请你找出并返回满足下述全部条件且不重复的四元组 [nums[a], nums[b], nums[c], nums[d] &#xff08;若两个四元组元素一一对应&#xff0c;则认为两个四元组重复&#xff09;…