React组件三大属性之state

组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示

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

编码操作
1) 初始化状态:
constructor (props) {
super(props)
this.state = {
stateProp1 : value1,
stateProp2 : value2
}
}
2) 读取某个状态值
this.state.statePropertyName
3) 更新状态---->组件界面更新
this.setState({
stateProp1 : value1,
stateProp2 : value2
})

例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../js/react.development.js"></script>

    <script src="../js/react-dom.development.js"></script>

    <script src="../js/babel.min.js"></script>

</head>

<body>

<div id="test"></div>

<script type="text/babel">

    /*

    需求: 自定义组件, 功能说明如下

          1. 显示h2标题, 初始文本为: 你喜欢我

          2. 点击标题更新为: 我喜欢你

    */

    //1、定义组件

    class Like extends React.Component {

        //初始化状态

        constructor (props) {

            super(props)

            this.state = {

               isLikeMe:false

            }

            //将新增的方法中的this强制绑定为组件对象,

            //bind 返回新的函数

            this.handleClick = this.handleClick.bind(this)

        }

        //新添加的方法this默认不是组件对象，而是undefined

       handleClick(){

           // 更新状态

           const  isLikeMe = !this.state.isLikeMe

           this.setState({isLikeMe})

        }

        render() {

            //根据状态获取结果

            const text = this.state.isLikeMe ? '你喜欢我' : '我喜欢你'

            return <h2 onClick={this.handleClick}>{text}</h2>

        }

    }

    //2、渲染组件标签

    ReactDOM.render(<Like/>,document.getElementById('test'))

</script>

</body>

</html>

React组件三大属性之state的更多相关文章

  1. React组件三大属性之 props

    React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...

  2. React组件三大属性之 refs

    React组件三大属性之 refs refs属性 1) 组件内的标签都可以定义ref属性来标识自己 a. <input type="text" ref={input => ...

  3. react的三大属性

    react的三大属性 state props  refs props 来自外部属性 states 来自内部状态 refs 用于表示组件内某个元素 state基础(最重要的属性) state是组件对象最 ...

  4. React组件的属性

    组件的三大属性 state props refs 写组件的要求: 1>组件必须大写 2>组件必须只有一个根元素 state是组件的重要对象 值可以是对象 组件被称之为 状态机 通过跟新组件 ...

  5. 08_组件三大属性(2)_props

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. 09_组件三大属性(3)_refs和事件处理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 07_组件三大属性(1)_state

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. React 三大属性state,props,refs以及组件嵌套的应用

    React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...

  9. 组件的三大属性state，props，refs与事件处理

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

随机推荐

  1. C语言编译器开发之旅（二）：解析器

    本节是我们这个编译器系列的第二节,进入语法分析与语义分析的部分解.在本节我们会编写一个简单的解析器. 解析器的主要功能分为两个部分: 识别输入的语法元素生成AST(Abstract Syntax Tr ...

  2. 用 Flutter 和 Firebase 轻松构建 Web 应用

    作者 / Very Good Ventures Team 我们 (Very Good Ventures 团队) 与 Google 合作,在今年的 Google I/O 大会上推出了 照相亭互动体验 ( ...

  3. 搞清楚Spring事件机制后：Spring的源码看起来简单多了

    本文主讲Spring的事件机制,意图说清楚: 什么是观察者模式? 自己实现事件驱动编程,对标Spring的事件机制 彻底搞懂Spring中的事件机制,从而让大家 本文内容较长,代码干货较多,建议收藏后 ...

  4. 【Azure Redis 缓存】由Azure Redis是否可以自定义密码而引申出Azure PaaS的Redis服务是否可以和自建的Redis进行主从配置呢？

    问题描述 在自建的Redis服务中,可以通过 config set requirepass <Password> 设置Redis的登录密码,然后使用auth 命令输入密码.操作命令如下: ...

  5. NOIP模拟测试14「旋转子段·走格子·柱状图」

    旋转子段 连60分都没想,考试一直肝t3,t2,没想到t1最简单 我一直以为t1很难,看了题解发现也就那样 题解 性质1 一个包含a[i]旋转区间值域范围最多为min(a[i],i)----max(a ...

  6. lvm脚本

    # 2 SWAP 20GB SWAP # 3 /usr/sap 50GB /usr/sap # 4 Shared 1 x 512 GiB /hana/shared # 5.6 Log 2 x 300 ...

  7. SpringBoot Cache 入门

    首先搭载开发环境,不会的可以参考笔者之前的文章SpringBoot入门 添加依赖 <dependency> <groupId>org.springframework.boot& ...

  8. yum安装GitLab-v11.11.8（git私服）

    GitLab 是一个用于仓库管理系统的开源项目,使用Git作为代码管理工具,并在此基础上搭建起来的web服务.(跟github.gitee类似) 1. 安装依赖软件 $ yum -y install ...

  9. Ha1cyon_CTF－公开赛(wp)

    一.babyasm 00007FF7A8AC5A50 push rbp 00007FF7A8AC5A52 push rdi 00007FF7A8AC5A53 sub rsp,238h 00007FF7 ...

  10. 刷算法，这些api不可不知！

    大家好,我是老三,最近在刷算法,发现有些api记得不熟,所以整理了一波,如果你也在刷题,赶紧收藏吧! 集合 在刷题中,各种数据结构是我们常常用到的,例如栈实现迭代.哈希存储键值对等等,我们来看看常用集 ...