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的更多相关文章

  1. React.js 样式组件:React Style

    点这里 React Style 是 React.js 可维护的样式组件.使用 React Native StyleSheet.create一样的样式. 完全使用 JavaScript 定义样式: ? ...

  2. react.js父子组件通信

    这里通过todolist的功能来说明 父组件: import React,{ Component,Fragment } from 'react'; import TodoItem from './To ...

  3. react.js table组件【可以直接使用】

    最近在做一个CMS,使用的技术是刚刚学习的react.js,准备制作一个查询的页面以及一个新增的页面. 这是table的公共组件: 我们在使用的过程中,只会用到: 制作出来的查询页面: 新增页面: 上 ...

  4. react.js 父子组件数据绑定实时通讯

    import React,{Component} from 'react' import ReactDOM from 'react-dom' class ChildCounter extends Co ...

  5. React Native 获取组件(Component)在屏幕上的位置

    年后主客户端的需求以及老的业务迁移RN,现在疯狂的在学RN.在迁移需求的时候遇到需要获取组件在屏幕上的绝对位置.页面如下: 就需要展开的时候获取sectionHeader(默认排序)在屏幕上的具体位置 ...

  6. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

  7. React.js 小书 Lesson18 - 挂载阶段的组件生命周期(一)

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson18 转载请注明出处,保留原文链接和作者信息. 我们在讲解 JSX 的章节中提到,下面的代码: ...

  8. 从源码的角度看 React JS 中批量更新 State 的策略(下)

    这篇文章我们继续从源码的角度学习 React JS 中的批量更新 State 的策略,供我们继续深入学习研究 React 之用. 前置文章列表 深入理解 React JS 中的 setState 从源 ...

  9. React.js 小书 Lesson24 - PropTypes 和组件参数验证

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson24 转载请注明出处,保留原文链接和作者信息. 我们来了到了一个非常尴尬的章节,很多初学的朋友 ...

随机推荐

  1. python中command执行shell命令脚本方法

    在Python中有一个模块commands也很容易做到以上的效果.看一下三个函数:1). commands.getstatusoutput(cmd)用os.popen()执行命令cmd, 然后返回两个 ...

  2. <OFFER05> 05_ReplaceSpaces

    void ReplaceBlank(char str[], int length) // length >= the real length of string { ) { return; } ...

  3. 论文笔记——PRUNING FILTERS FOR EFFICIENT CONVNETS

    论文地址:https://arxiv.org/abs/1608.08710 主要思想 这篇文章主要讲了对filters的裁剪,裁剪方法是计算L1范数,然后裁剪掉较少的,多少取决于加速比. 实现效果 V ...

  4. 【TCP/IP详解 卷一:协议】第二十三章 TCP的保活定时器

    本章介绍保活定时器. 在 TCP 的三握四挥 章节中,我们介绍了 处在 TIME_WAIT 的 2MSL定时器:在 TCP的超时与重传 章节中,我们介绍了 重传定时器:在上一章节中,我们介绍了 防止死 ...

  5. stm32 iic读取mpu6050失败 改用串口

    mpu6050使用iic一直失败.放弃治疗,使用串口... #include "led.h" #include "mpu6050.h" #include &qu ...

  6. 1、Python快速入门(0529)

    学习来自马哥教育的视频,感谢马哥 编程语言: 用户: 问题空间 计算机:解决问题 解空间 抽象: 机器代码-->微码编程-->高级语言 (语言的高下级的是根据语言是否被人类容易理解或者更接 ...

  7. MVC ---- Linq查询

    Linq查询:编译后,会生成对应的标准查询运算符!所以说,Linq只是类似与Sql的一种更加友好的语法而已: public class LinqDemo{ public static void Tes ...

  8. Spooling技术

    转自https://blog.csdn.net/weixin_42229896/article/details/80736517   假脱机的概念 SPOOLing技术:利用高速共享设备(通常是磁鼓或 ...

  9. Error: Checksum mismatch.

    bogon:bin macname$ brew install go ==> Downloading https://homebrew.bintray.com/bottles-portable- ...

  10. 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 ...