react 组件的三大属性—state

最新推荐文章于 2022-12-28 17:26:01 发布

胡椒粉0121

最新推荐文章于 2022-12-28 17:26:01 发布

阅读量264

点赞数

分类专栏：前端MVVM框架—React

本文链接：https://blog.csdn.net/huangjianfeng21/article/details/92839481

版权

前端MVVM框架—React 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

state的介绍

state是组件对象最重要的属性, 值是对象(可以包含多个数据)，组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

state的使用

初始化指定

constructor() {
    super()
    this.state = {
        stateName1 : stateValue1,
        stateName2 : stateValue2
    }
}

读取显示

this.state.stateName1

更新状态-->更新界面(自动更新)

this.setState({stateName1 : newValue})

state使用实例

自定义组件, 功能：显示h2标题, 初始文本为: 你喜欢我，点击标题更新为: 我喜欢你

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>07_component_state</title>
</head>
<body>
<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
  /*
  需求: 自定义组件, 功能说明如下
    1. 显示h2标题, 初始文本为: 你喜欢我
    2. 点击标题更新为: 我喜欢你
  */
  // 1.定义组件
  class Like extends React.Component {
    constructor(props) { // 初始化状态
      super(props)
      this.state = {
        isLikeMe : false
      }

      // 将新增的方法的this强制绑定为组件对象
      this.handleClick = this.handleClick.bind(this) //
    }
    // 这个是重写组件内的方法，所以this代表的是组件对象
    render () {
      // 读取状态，最终要得到isLikeMe的值
      // const isLikeMe = this.state.isLikeMe // 正常写法
      const {isLikeMe} = this.state // 解构赋值的写法（es6的语法）
      return <h2 onClick={this.handleClick}>{isLikeMe?'你喜欢我' : '我喜欢你'}</h2>
    }

    // 新添加的方法，内部的this默认不是组件对象，而是undefined
    handleClick () {
      const isLikeMe = !this.state.isLikeMe
      // 更新状态
      this.setState({isLikeMe})
    }
  }

  // 2.渲染组件
  ReactDOM.render(<Like/>, document.getElementById('example'))
</script>
</body>
</html>

胡椒粉0121

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react 组件的三大属性—state

state的介绍state是组件对象最重要的属性, 值是对象(可以包含多个数据)，组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)state的使用初始化指定constructor() { super() this.state = { stateName1 : stateValue1, ...
复制链接

扫一扫