react中的state详解

简介: 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>
相关文章
|
1月前
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
49 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
1月前
|
前端开发
学习react基础(2)_props、state和style的使用
本文介绍了React中组件间数据传递的方式,包括props和state的使用,以及如何在React组件中使用style样式。
26 0
|
9天前
|
前端开发 JavaScript 调度
React 组件状态(State)
10月更文挑战第8天
10 1
|
2月前
|
前端开发
React组件实例更改state状态值(四)
【8月更文挑战第14天】React组件实例更改state状态值(四)
30 1
React组件实例更改state状态值(四)
|
2月前
|
前端开发 JavaScript
React组件实例state(三)
【8月更文挑战第14天】React组件实例state(三)
28 1
React组件实例state(三)
|
1月前
|
前端开发
React使用hooks遇到的坑_state中的某几个属性数据变成了空字符
本文讨论了在React使用hooks时遇到的一个问题:state中的某些属性数据变成了空字符。作者通过在修改函数中重新解构赋值来获取最新的state值,解决了因数据更新不及时导致的问题。
46 0
|
5月前
|
存储 前端开发 API
第六章 react组件实例中三大属性之State
第六章 react组件实例中三大属性之State
|
2月前
|
存储 前端开发
React 中的 state 和 props 有什么区别?
【8月更文挑战第31天】
37 0
|
3月前
|
存储 前端开发 JavaScript
前端框架与库 - React基础:组件、Props、State
【7月更文挑战第12天】React是JavaScript库,专注UI构建,基于组件化。组件是UI模块,可函数式或类定义。Props是组件间安全传递数据的只读参数,用defaultProps和propTypes保证正确性。State则是组件内部可变数据,用于驱动更新。使用setState()确保正确变更和渲染。了解并妥善处理这些概念是高效React开发的基础。
68 7
|
4月前
|
存储 前端开发 JavaScript
React中有效地使用props和state来管理组件的数据和行为
React中有效地使用props和state来管理组件的数据和行为