react中的state详解

最新推荐文章于 2024-11-20 08:53:58 发布

Api工程师~

最新推荐文章于 2024-11-20 08:53:58 发布

阅读量2.9k

点赞数 3

分类专栏： react

本文链接：https://blog.csdn.net/m0_57479235/article/details/118710521

版权

react 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文详细介绍了React组件中的state属性，强调了state的重要性以及如何正确修改state。通过构造函数初始化state，并展示了使用this.setState方法更新state的两种方式，包括传入对象和函数。还提到了在修改state时，由于可能的异步更新，应避免直接修改state值。此外，展示了如何遍历state并渲染列表元素。

摘要由CSDN通过智能技术生成

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>