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 转载请注明出处,保留原文链接和作者信息. 我们来了到了一个非常尴尬的章节,很多初学的朋友 ...
随机推荐
- 20145333茹翔 Exp8 Web基础
20145333茹翔 Exp8 Web基础 实验问题回答 (1)什么是表单 表单是一个包含表单元素的区域,表单元素是允许用户在表单中(比如:文本域.下拉列表.单选框.复选框等等)输入信息的元素,表单在 ...
- 如何创建自己的python包
写过python的人都知道python最方便也最牛的地方就是它有无数的第三方lib可以直接拿来使用,可以让编写代码变的更容易. 长用的安装第三方lib的方法有easy_install和pip,这两个的 ...
- 分布式系统一致性算法Raft
Raft 算法也是一种少数服从多数的算法,在任何时候一个服务器可以扮演以下角色之一:Leader:负责 Client 交互 和 log 复制,同一时刻系统中最多存在一个Follower:被动响应请求 ...
- firefox、chrome的DNS缓存清除方法
通过设置hosts文件可以强制指定域名对应的IP,当修改hosts文件,想要浏览器生效,最直接的方法关闭浏览器后重新开启:如果不想重启浏览器,只需要清空浏览器的DNS缓存即可. 清空DNS缓存在chr ...
- Specify Computed Columns in a Table
https://docs.microsoft.com/en-us/sql/relational-databases/tables/specify-computed-columns-in-a-table ...
- 51NOD 1133 不重叠的线段
1133 不重叠的线段 X轴上有N条线段,每条线段有1个起点S和终点E.最多能够选出多少条互不重叠的线段.(注:起点或终点重叠,不算重叠). 例如:[1 5][2 3][3 6],可以选[2 ...
- 论文笔记之:UNSUPERVISED REPRESENTATION LEARNING WITH DEEP CONVOLUTIONAL GENERATIVE ADVERSARIAL NETWORKS
UNSUPERVISED REPRESENTATION LEARNING WITH DEEP CONVOLUTIONAL GENERATIVE ADVERSARIAL NETWORKS ICLR 2 ...
- 网络压缩论文整理(network compression)
1. Parameter pruning and sharing 1.1 Quantization and Binarization Compressing deep convolutional ne ...
- UVa 1610 聚会游戏
https://vjudge.net/problem/UVA-1610 题意:输入一个n个字符串的集合D,找一个长度最短的字符串S,使得D中恰好有一半串小于等于S,另一半串大于S. 思路:先拍序,然后 ...
- hdu 1573 X问题 两两可能不互质的中国剩余定理
X问题 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Problem Desc ...