react中的state详解

state

理解：state是组件对象最重要的属性，值是对象(可以包含多个key—value组合)

state中的值可以修改，修改的唯一方法是调用this.setState,每次修改以后，自动调用 this.render 方法，再次渲染组件。（也就是说直接this.state.num=2这样直接修改值是无效的）
state在组件的构造函数中赋值

  class View extends Component{constructor(){super();this.state={num:10}}//state={num:10} 直接做为实例属性也可以}

setState有两种格式

传一个对象

直接修改state的值
因为 this.props 和 this.state 可能会异步更新，所以不能依赖他们的值来更新下一个状态。解决办法让 setState() 接收一个函数

  this.setState({})

传一个函数

接收两个参数preState,props
更新前的state，更新后的props

修改state自身的值(例：state.num+4)

// 传函数的两种写法
// 普通函数this.setState(function(state,props){return {num:state.num--}})
// 箭头函数this.setState((state,props)=>({num:state.num}))

遍历state的值，循环渲染页面

list(){return this.state.lists.map((v,i)=>(<li key={i}>{v}</li>))
}
//直接在dom中渲染即可(因为render会执行两次,所以要进行简单的处理)
<ul>{this.state.lists.length!==0:this.list():'';}</ul>

react中的state详解相关推荐

js路由在php上面使用,React中路由使用详解
这次给大家带来React中路由使用详解,React中路由使用的注意事项有哪些,下面就是实战案例,一起来看一下. 路由通过 URL 映射到对应的功能实现,React 的路由使用要先引入 react-r ...
React中使用Vditor详解（自定义图片）
安装 npm install vditor -s 引用导入依赖包 import Vditor from "vditor"; 导入样式 import "vditor/sr ...
React中的Hooks详解
1.概述 React官方网站原文:Hooks 是一项新功能提案,可让您在不编写类的情况下使用 state(状态) 和其他 React 功能. 我总结了下使用Hooks的理由: 1.解决class中的代 ...
React中setState方法详解
一.为什么要使用 setState 方法,如何用? 在 React 中,组件分为有状态组件和无状态组件,有状态组件就是能够定义 state 的组件,比如类组件,无状态组件反之,比如函数组件.st ...
react中的setState详解
1.setState更新状态的2种写法 (1). setState(stateChange, [callback])------对象式的setState 1.stateChange为状态改变对象( ...
webpack搭建php服务器,webpack搭建react开发环境步骤详解
这次给大家带来webpack搭建react开发环境步骤详解,webpack搭建react开发环境的注意事项有哪些,下面就是实战案例,一起来看一下.mkdir react-redux && ...
[Trident] Storm Trident 教程，state详解、trident api详解及实例
英文原址:https://github.com/nathanmarz/storm/wiki/Trident-tutorial ---------------- Trident是在storm基础上,一个 ...
C语言 -- string.h中函数功能详解与手动实现 - 02（常用函数memcpy、memmove、strcpy、strdup、strcat、strtok...）
内容预览 3.5.搬迁类型 --- 函数功能详细说明 :将内存空间中内容移动.复制到另一内存空间 3.6.搬迁类型 --- 函数功能测试与手动实现 3.6.1.memcpy.memccpy 3.6.2 ...
linux中mkdir命令含义,Linux中mkdir命令详解
Linux中mkdir命令详解 linux mkdir用来创建目录,要求创建目录的用户在当前目录中具有写权限,并且指定的目录名不能是当前目录中已有的目录. 1. 新建一个文件夹 one 2. 新建三个 ...

react中的state详解

state

setState有两种格式

遍历state的值，循环渲染页面

react中的state详解相关推荐

最新文章

热门文章