React Js之组件(Component)与state
React Js组件:
组件(Component)是为了更好的维护我们的应用,可以在不影响其他的组件的情况下更新或者更改组件。
state:是标记数据的来源,我们使state比较简单和单一,如果我们有是个相应的state,我们应该进行相应的封装,我们应该创建一个容器组件来保存所有的值。
如下面代码:
import React from 'react'
class App extends React.Component{ //有状态的值
constructor(){
super(); this.state = {
data:[
{"id":"1","name":"rtony","age":"20"},
{"id":"2","name":"xuanyi","age":"20"},
{"id":"3","name":"tony","age":"20"},
{"id":"4","name":"jimeth","age":"20"},
]
}
} render(){
return (
<div>
<Header />
<Content/>
<table>
<tbody>
{/****注意这里是使用key={i}在map方法中,这将有助于之更新必要的元素,而不是在发生变化时重新绘制整个列表,对于大量动态创建的元素来说,这是一个巨大的性能提升****/}
{this.state.data.map((person,i) => <TableRow key={i} data={person} />)}
</tbody>
</table>
</div>
);
}
}
class Header extends React.Component{
render(){
return(
<div>
<h1>header</h1>
</div>
);
}
} class Content extends React.Component{
render(){
return (
<div>
<h2>Content</h2>
<p>this is a content!</p>
</div>
);
}
} class TableRow extends React.Component{
render() {
return (
<tr>
<td>{this.props.data.id}</td>
<td>{this.props.data.name}</td>
<td>{this.props.data.age}</td>
</tr>
);
}
}
export default App;
上面的例子中,有三个组件,这三个组件将app的界面分为了三个部分,一个是App主组件,还有其余的子组件header和content,这使界面更容易维护和更新,加入我们需要修改header或者content的内容,只需要改相应的组件就可以了。
React Js之组件(Component)与state的更多相关文章
- React.js 样式组件:React Style
点这里 React Style 是 React.js 可维护的样式组件.使用 React Native StyleSheet.create一样的样式. 完全使用 JavaScript 定义样式: ? ...
- react.js父子组件通信
这里通过todolist的功能来说明 父组件: import React,{ Component,Fragment } from 'react'; import TodoItem from './To ...
- react.js table组件【可以直接使用】
最近在做一个CMS,使用的技术是刚刚学习的react.js,准备制作一个查询的页面以及一个新增的页面. 这是table的公共组件: 我们在使用的过程中,只会用到: 制作出来的查询页面: 新增页面: 上 ...
- react.js 父子组件数据绑定实时通讯
import React,{Component} from 'react' import ReactDOM from 'react-dom' class ChildCounter extends Co ...
- React Native 获取组件(Component)在屏幕上的位置
年后主客户端的需求以及老的业务迁移RN,现在疯狂的在学RN.在迁移需求的时候遇到需要获取组件在屏幕上的绝对位置.页面如下: 就需要展开的时候获取sectionHeader(默认排序)在屏幕上的具体位置 ...
- 移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
- React.js 小书 Lesson18 - 挂载阶段的组件生命周期(一)
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson18 转载请注明出处,保留原文链接和作者信息. 我们在讲解 JSX 的章节中提到,下面的代码: ...
- 从源码的角度看 React JS 中批量更新 State 的策略(下)
这篇文章我们继续从源码的角度学习 React JS 中的批量更新 State 的策略,供我们继续深入学习研究 React 之用. 前置文章列表 深入理解 React JS 中的 setState 从源 ...
- React.js 小书 Lesson24 - PropTypes 和组件参数验证
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson24 转载请注明出处,保留原文链接和作者信息. 我们来了到了一个非常尴尬的章节,很多初学的朋友 ...
随机推荐
- python中command执行shell命令脚本方法
在Python中有一个模块commands也很容易做到以上的效果.看一下三个函数:1). commands.getstatusoutput(cmd)用os.popen()执行命令cmd, 然后返回两个 ...
- <OFFER05> 05_ReplaceSpaces
void ReplaceBlank(char str[], int length) // length >= the real length of string { ) { return; } ...
- 论文笔记——PRUNING FILTERS FOR EFFICIENT CONVNETS
论文地址:https://arxiv.org/abs/1608.08710 主要思想 这篇文章主要讲了对filters的裁剪,裁剪方法是计算L1范数,然后裁剪掉较少的,多少取决于加速比. 实现效果 V ...
- 【TCP/IP详解 卷一:协议】第二十三章 TCP的保活定时器
本章介绍保活定时器. 在 TCP 的三握四挥 章节中,我们介绍了 处在 TIME_WAIT 的 2MSL定时器:在 TCP的超时与重传 章节中,我们介绍了 重传定时器:在上一章节中,我们介绍了 防止死 ...
- stm32 iic读取mpu6050失败 改用串口
mpu6050使用iic一直失败.放弃治疗,使用串口... #include "led.h" #include "mpu6050.h" #include &qu ...
- 1、Python快速入门(0529)
学习来自马哥教育的视频,感谢马哥 编程语言: 用户: 问题空间 计算机:解决问题 解空间 抽象: 机器代码-->微码编程-->高级语言 (语言的高下级的是根据语言是否被人类容易理解或者更接 ...
- MVC ---- Linq查询
Linq查询:编译后,会生成对应的标准查询运算符!所以说,Linq只是类似与Sql的一种更加友好的语法而已: public class LinqDemo{ public static void Tes ...
- Spooling技术
转自https://blog.csdn.net/weixin_42229896/article/details/80736517 假脱机的概念 SPOOLing技术:利用高速共享设备(通常是磁鼓或 ...
- Error: Checksum mismatch.
bogon:bin macname$ brew install go ==> Downloading https://homebrew.bintray.com/bottles-portable- ...
- Ubuntu14.04 libboost_program_options.so.1.54.0: cannot open shared object file: No such file or directory
macname@ubuntu:~/Desktop$ roslaunch blackrospack: error : cannot open shared object file: No such fi ...