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. 实用的jar包加密方案

    前言 jar包相信大家都很熟悉,是通过打包java工程而获得的产物,但是jar包是有一个致命的缺点的,那就是很容易被反编译,只需要使用jd-gui就可以很容易的获取到java源码. 如果你想要防止别人 ...

  2. 包及权限配置&java存储机理绘制

    包及权限配置 包的声明和导入 //声明 package aa.bb.cc; public class A{;} class B{;} //即在java输出目录aa.bb.cc中放入编译后的A.clas ...

  3. RabbitMQ由浅入深入门全总结（二）

    写在最前面 距离上一次发文章已经很久了,其实这段时间一直也没有停笔,只不过在忙着找工作还有学校结课的事情,重新弄了一下博客,后面也会陆陆续续会把文章最近更新出来~ 这篇文章有点长,就分了两篇 PS:那 ...

  4. 【VBA】读取配置文件存入字典型变量中

    配置文件:  源码: Dim Co As Object '设为全局变量 Function 读取cfg() As Boolean Dim strcfg As String strcfg = " ...

  5. 《四大点，搞懂Redis到底快在哪里？》

    一.开发语言 二.纯内存访问 三.单线程 四.非阻塞多路I/O复用机制 前言 Redis是一种基于键值对(Key-Value)的NoSQL数据库 ,Redis的Value可以由String,hash, ...

  6. 广州某小公司：ThreadLocal面试

    <对线面试官>系列目前已经连载24篇啦!有深度风趣的系列! [对线面试官]Java注解 [对线面试官]Java泛型 [对线面试官] Java NIO [对线面试官]Java反射 & ...

  7. Java-IO流的继承结构

    一  IO流的继承结构如下 二  字节流 1.InputStream(字节流读取数据),为抽象类,不可创建对象:其具体实现需要通过子类FileInputStream(读取文件数据).BufferedI ...

  8. Linux用户体系

    1.系统中和用户相关的文件 (1)/etc/passwd:记录系统用户信息文件 (2)/etc/shadow:系统用户密码文件 (3)/etc/group:组用户信息文件 (4)/etc/gshado ...

  9. Python迭代器和生成器你学会了吗？

    在了解什么是迭代器和生成器之前,我们先来了解一下容器的概念.对于一切皆对象来说,容器就是对象的集合.例如列表.元祖.字典等等都是容器.对于容器,你可以很直观地想象成多个元素在一起的单元:而不同容器的区 ...

  10. Docker：部署PXC8.0集群时，启动容器报错New joining cluster node didn‘t find all needed SSL artifacts

    使用docker部署mysql PXC集群8.0版本,启动第二个节点的时候遇到报错,New joining cluster node didn't find all needed SSL artifa ...