文档章节

reactJS -- 3 State 工作原理

奋斗的小芋头
 奋斗的小芋头
发布于 2017/07/03 11:28
字数 308
阅读 14
收藏 0

一. State  作用域

state 的作用域只在当前的 class

当state

import React from 'react';
import ReactDOM from 'react-dom';
//export 暴露
export default class BodyIndex extends React.Component{
  constructor(){   //类的构造函数
    super(); // 调用基类的所有的初始化方法
    this.state = {
      userName :"parray",
      age:10
    }; //初始化赋值
  }
  render(){   //解析类的输出

    setTimeout(()=>{
      //更改state的语句
      this.setState({
        userName : "userName changed",
        age : 20
      })

    },4000);  //4s  刷新
    return (
      <div>
        <h2>页面主体内容</h2>
        <p>{this.state.userName} {this.state.age}</p>
      </div>
    )
  }
}

二. state的使用

迄今为止,基于它自己的props,每个组件都渲染了自己一次。props 是不可变的:它们从父级传来并被父级“拥有”。为了实现交互,我们给组件引进了可变的 statethis.state 是组件私有的,可以通过调用 this.setState() 改变它。每当state更新,组件就重新渲染自己。

render() 方法被声明为一个带有 this.props 和 this.state 的函数。框架保证了 UI 总是与输入一致。

1.state的作用域只是当前的class,不会污染其他的class
2.state改变后,元素自动更新,但不会
3.传入参数形式多样,上例传入json

1.更改state

this.setState({
        userName : "userName changed",
        age : 20
      })

2.当元素修改时显示高亮

Rendering


 

© 著作权归作者所有

奋斗的小芋头
粉丝 1
博文 161
码字总数 129345
作品 0
大连
私信 提问
一看就懂的ReactJs入门教程-精华版

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJs的风采吧~~ 文章有点...

方宏春
2018/06/20
0
0
选择 Reac​​tJS 的五大理由

ReactJS是一个开源的JavaScript库,并且由Facebook和Instagram这样的顶尖IT企业以及开发者社区所维护。该框架广泛使用于为web应用程序开发用户界面的时候。这个特殊的框架被发明时带有这样一...

达尔文
2016/09/12
4.1K
32
ReactJs入门教程-精华版

一、ReactJS简介   React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西...

-鹏
2015/11/10
0
0
React.js 实战之深入理解组件

sublime 插件安装 用Package Control安装 按下调出命令面板 输入 调出 选项并回车,然后在列表中选中要安装的插件 function形式 state属性 props属性介绍:...

紫霞等了至尊宝五百年
2018/06/02
0
0
【译】解构ReactJS的Flux

用ReactJS时不要使用MVC 我将通过列出一些单向数据流的例子来将ReactJS官方实现的Flux和我写的库Reflux作比较。 Facebook的ReactJS开发小组似乎并不待见MVC框架。将MVC模式和ReactJS结合使用...

leozdgao
2015/06/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

计算机网络

计算机网络体系结构 OSI 其中表示层和会话层用途如下: 表示层 :数据压缩、加密以及数据描述,这使得应用程序不必关心在各台主机中数据内部格式不同的问题。 会话层 :建立及管理会话。 五层...

一只小青蛙
57分钟前
2
0
0.01-Win10安装linux子系统

一、安装Debian子系统 -1、控制面板设置: -1.1、打开“控制面板” —— “程序” —— “启用或关闭Windows功能” —— 勾选 “适用于Linux的Windows子系统” -2、设置: -2.1、打开“设置”...

静以修身2025
昨天
2
0
init 0-6 (启动级别:init 0,1,2,3,4,5,6)

启动级别: init 0,1,2,3,4,5,6 这是个很久的知识点了,只是自己一直都迷迷糊糊的,今天在翻出来好好理解下。。 0: 停机 1:单用户形式,只root进行维护 2:多用户,不能使用net file system...

圣洁之子
昨天
2
0
Android Camera HAL浅析

1、Camera成像原理介绍 Camera工作流程图 Camera的成像原理可以简单概括如下: 景物(SCENE)通过镜头(LENS)生成的光学图像投射到图像传感器(Sensor)表面上,然后转为电信号,经过A/D(模数转...

天王盖地虎626
昨天
2
0
聊聊Elasticsearch的ProcessProbe

序 本文主要研究一下Elasticsearch的ProcessProbe ProcessProbe elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/monitor/process/ProcessProbe.java public class ProcessProb......

go4it
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部