1. setState的简单实践和理解

比如说，我们需要定义一个列表组件。当点击奇数列表的时候随机调换一下顺序；当点击偶数列表的时候在其后加=和不加=号之间切换。

1.1 代码实现

<body>
<div id="test"></div><script crossorigin src="./js/react.development.js"></script>
<script crossorigin src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script><script type="text/babel">var root = document.getElementById("test")class MyElement extends React.Component {constructor() {super();this.state = {datas: ["张三", "李四", "王五"]}}userClick(index) {let flag = index % 2 === 0if (flag) { // 奇数列表项乱序切换let temp_list = []for (let i = 0; i < this.state.datas.length; i++) {if (i % 2 === 0) {temp_list.push(this.state.datas[i])}}temp_list.sort(() => Math.random() - 0.5)let temp_data = []let j = 0for (let i = 0; i < this.state.datas.length; i++) {if (i % 2 === 0) {temp_data.push(temp_list[j])j++} else {temp_data.push(this.state.datas[i])}}this.setState({datas: temp_data})} else { // 等号和没等号之间切换let temp_list = []let switchFlag = falseif(this.state.datas[1] != null && this.state.datas[1].endsWith("=")) {switchFlag = true}for (let i = 0; i < this.state.datas.length; i++) {if (i % 2 !== 0) {if (!switchFlag) {temp_list.push(this.state.datas[i] + "=")} else {temp_list.push(this.state.datas[i].substring(0, this.state.datas[i].length - 1))}} else {temp_list.push(this.state.datas[i])}}this.setState({datas: temp_list})}}render() {return (<ul>{this.state.datas.map((item, index) => {return <li key={index} onClick={() => {this.userClick(index)}}>{item}</li>})}</ul>)}}ReactDOM.render(<MyElement/>, root)
</script>
</body>

注意到这里更新数据的时候使用了：

this.setState({datas: temp_list})

且数据声明也放置在了构造器中：

constructor() {super();this.state = {datas: ["张三", "李四", "王五"]}}

那么，为什么需要这么写？

1.2 分析

对于下面极简的类组件：

class MyElement extends React.Component {constructor() {super();console.log(this)}render() {return (<div>Hello!</div>)}
}

运行后可以在控制台看见打印的实例：

也就是在自定义组件，继承自React.Component的时候，默认就带有一个为null的属性state。如果我们需要做到数据的动态更新，就需要使用state这个属性，并且在使用的时候，需要使用setState来进行更新。

2. 函数组件state、类组件state

2.1 函数组件state

比如下面定义一个简单的函数组件：

function Demo() {return (<div>Hello!</div>)
}

经过babel翻译后为：

"use strict";function Demo() {return /*#__PURE__*/React.createElement("div", null, "Hello!");
}

我们知道在Rect函数组件中只有props，没有refs以及state。如果需要使用state需要引入外部的钩子。比如：

function Demo(props) {console.log(props)const [flag, setFlag] = useState(false)const handleClick = () => {setFlag(!flag)}return (<div onClick={handleClick}>Hello! flag is {flag ? 'true': 'false'}</div>)
}root.render(<Demo name={"张三"} />
);

在申明state变量的时候，就指定了变量名和更新这个值状态的方法，即：

const [flag, setFlag] = useState(false)

2.2 类组件state

import React from "react";class ClassState extends React.Component{constructor() {super();this.state = {name: '李四', age: 12}}handleClick = () => {const pre_age = this.state.agethis.setState({age: pre_age + 1})}render(){const {name, age} = this.statereturn (<div>Hello! class state. Info: <br/><p>姓名：{name}</p><p>年龄：{age}</p><button onClick={this.handleClick}>点击修改</button></div>)}
}export default ClassState

点击按钮可以将用户年龄增加。值得注意的是，这里使用this.setState来更新的时候，并不需要将没有发生改变的用户name字段重新赋值。这里也可以发现，setState不是覆盖，而是对比差异，然后更新。

React基础—state组件使用及分类相关推荐

React基础—父子组件通信
1. 父子组件通信在上一小节<React基础-PropTypes类型检查>中已经定义了父.子组件,接下来的工作就将在这个案例上做拓展. 比如这里为列表右侧添加一个删除按钮,然后点击后删除 ...
react基础入门，类组件和函数组件，state，props，refs
React入门目录 React入门 React入门 Vue跟React的异同点相同点不同点 Vue小建议 1. 不需要响应式的数据应该怎么处理? 2. Key 3. 数据结构 React 教程 ...
React基础——组件状态state、属性props
import React from 'react'; // 此句不能少 import ReactDom from 'react-dom';class Taggle extends React.Comp ...
【React 基础】之 React 面向组件编程
准备工作使用 React 开发者工具调试复习类相关知识定义 class(类),代码如下: // 创建一个 Person 类 class Person {// 构造器方法constructor ...
React 基础案例 | 可折叠的问题列表和按分类展示的美食菜谱（三）
一.开篇大家好,本篇文章小编将和大家一起做两个简单的案例--可折叠的问题列表和按分类展示的美食菜谱.这两个案例,我们还是继续练习 useState Hook 的用法. 在前面的两篇文章里我们已经练习 ...
React初学之组件基础
学习参考慕课网-react入门讲的比较好 React React并不是一个完整的MVC MVVM框架,只是其中的V部分 React组件化构建UI的思路值得学习 React的特点在于"轻量 ...
React 基础案例 | 支持左右按钮点击查看信息的卡片组件（二）
一.开篇大家好,本篇文章小编将和大家一起实现一个用左右点击的方式翻看卡片信息的组件,这个组件很常用,一般会在网站上显示案例或团队成员的信息.通过本案例我们继续练习 useState Hook 在实际 ...
【React 基础】之 React 基本介绍、jsx 规则、模块与组件
React 全家桶 React 基础 React-Router 路由 PubSub + 消息管理库 Redux 集中式的状态管理 Ant-Design UI 组件库 - React 简介官网英文官 ...
React基础篇（四）之创建组件方式分析
本小将讲述在 React 中, 1.通过函数 function 方式创建组件并分离成单独的组件实现,然后传递参数给组件使用 2.通过关键字 class 来创建组件,并分离成单独的组件实现,然后传递参 ...

React基础—state组件使用及分类