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. AIoT开放平台及应用

    AIoT开放平台及应用 阿里AIoT开放平台,是阿里云IoT面向开发者的能力接入渠道,开发者可以在这里完成能力的申请.开通.部署.配置和集成开发等一些列工作.这些能力并不的独立交付,而是通过关联到行业 ...

  2. CodeGen融合核心关系循环扩展

    CodeGen融合核心关系循环扩展 Expansion Tokens <HARMONYCORE_RELATION_NAME> 插入当前关系的名称.关系名称将自动生成,但可以由Harmony ...

  3. 用Auto-TensorCore代码生成优化matmul

    用Auto-TensorCore代码生成优化matmul 将演示如何使用TVM Auto TensorCore CodeGen在Volta/Turing GPU上编写高性能matmul调度.这是一个透 ...

  4. 使用NVIDIA A100 TF32获得即时加速

    使用NVIDIA A100 TF32获得即时加速 NVIDIA A100带来了我们公司历史上最大的单代性能增长.这是一个新的结构创新,这是一个多功能的支持,这是一个多功能的结构支持.TF32是用于深度 ...

  5. 【NX二次开发】获取两个面之间的所有面

    已知两个蓝色面,使用遍历面的方法求紫色面.算法例子: 1 bool is_NeighborFace(tag_t tagFace1, tag_t tagFace2) 2 { 3 vector<ta ...

  6. 为什么代码规范要求SQL语句不要过多的join？

    面试官:有操作过Linux吗? 我:有的呀 面试官:我想查看内存的使用情况该用什么命令 我:free 或者 top 面试官:那你说一下用free命令都可以看到啥信息 我:那,如下图所示 可以看到内存以 ...

  7. 从 SQL 到 MongoDB，这一篇就够了

    很多开发者首次接触数据库(通常是在高校课堂)的概念,或者说接触第一个数据库,通常是 SQL 数据库,而现在,NoSQL 数据库后来居上,很多原 SQL 数据的使用者难免有转向 NoSQL 的需求.而作 ...

  8. 想玩转JAVA高并发，这些概念你必须懂

    高并发高并发 它是互联网分布式系统架构设计中必须考虑的因素之一,通常是指,保证系统能够同时并行化处理海量请求 同步和异步 同步:发送一个请求,等待返回,然后再发送下一个请求.提交请求 -> 等待 ...

  9. 支持向量机(SVM)之硬阈值

    支持向量机 ( support vector machine, SVM ) 是使用超平面来对给定的 p 维向量进行分类的非概率二元线性分类器. 一.超平面 ( hyperplane ) 在一个p维的输 ...

  10. C#中怎样使控件随着窗体一起变化大小

    此文原作者为CSDN的 zhouwen5288,原文链接  http://blog.csdn.net/zhouwen5288/article/details/6493835 本人仅作为随笔备忘,转载请 ...