组件的创造方法为React.createClass() ——创造一个类,react系统内部设计了一套类系统,利用它来创造react组件。但这并不是必须的,我们还可以用es6的class类来创造组件,这也是Facebook官方推荐的写法。

这两种写法实现的功能一样但是原理却是不同,es6的class类可以看作是构造函数的一个语法糖,可以把它当成构造函数来看,extends实现了类之间的继承 —— 定义一个类Main 继承React.Component所有的属性和方法,组件的生命周期函数就是从这来的。constructor是构造器,在实例化对象时调用,super调用了父类的constructor创造了父类的实例对象this,然后用子类的构造函数进行修改。这和es5的原型继承是不同的,原型继承是先创造一个实例化对象this,然后再继承父级的原型方法。了解了这些之后我们在看组件的时候就清楚很多。

当我们使用组件< Main />时,其实是对Main类的实例化——new Main,只不过react对这个过程进行了封装,让它看起来更像是标签。

有三点值得注意:1、定义类名字的首字母必须大写 2、因为class变成了关键字,类选择器需要用className来代替。 3、类和模块内部默认使用严格模式,所以不需要用use strict指定运行模式。

react组件是怎么来的的更多相关文章

  1. React 组件性能优化探索实践

    转自:http://www.tuicool.com/articles/Ar6Zruq React本身就非常关注性能,其提供的虚拟DOM搭配上Diff算法,实现对DOM操作最小粒度的改变也是非常的高效. ...

  2. webpack 打包一个简单react组件

    安装Webpack,并加载一个简单的React组件 全局的npm模块安装: npm install -g webpack 安装jsx-loader npm install --save-dev jsx ...

  3. React 组件性能优化

    React组件性能优化 前言 众所周知,浏览器的重绘和重排版(reflows & repaints)(DOM操作都会引起)才是导致网页性能问题的关键.而React虚拟DOM的目的就是为了减少浏 ...

  4. React组件属性部类(propTypes)校验

    React组件属性类型(propTypes)校验 Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (v ...

  5. 使用reflux进行react组件之间的通信

    前言 组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行 父-子 通信,可以直接pass props. 进行 子-父 通信,往父组件传给子组件的函数注入 ...

  6. 野心勃勃的React组件生命周期

    当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件    React实现了UI=Fn(St ...

  7. React组件性能优化

    转自:https://segmentfault.com/a/1190000006100489 React: 一个用于构建用户界面的JAVASCRIPT库. React仅仅专注于UI层:它使用虚拟DOM ...

  8. React组件生命周期过程说明

    来自kiinlam github94 实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidM ...

  9. React组件

    React组件 组件是React中的基本单位,在每个组件里面又封装了程序逻辑,通过reader标出界面片段或者回传一段描述,组件再通过React.renderComponent将组件展示在浏览器中.每 ...

  10. React组件系统、props与状态(state)

     多个组件合成一个组件: var style = { fontSize: 20, color: '#ff0000' }; var WebSite = React.createClass({ rende ...

随机推荐

  1. jQuery 点击查看 收起

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jquery /css3 全屏的渐变背景

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. JavaScript 原生代码找对象的方法

    1. id :  document.getElementById('id') 2. 标签 : document.getElementsByTagName('标签') //获得的是一个标签数组 3. N ...

  4. Axis1.4框架 实现webservice服务器和客户端

    一:软件环境 win7旗舰版, Eclipse,JDK1.6,tomcat6.0,Axis1.4的包. 至于Axis1.4包网上可以下载,如果是在找不到可以留言给我. 二:摘要 将解压后的 axis- ...

  5. win7 命令行禁用开启usb存储

    禁用: reg add "HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\usbstor" /v Start /t reg ...

  6. 03XML Schema Definition

    1. XML Schema Definition 1. XML Schema Definition XML Schema(XML Schema Definition,XSD)用于描述 XML 文档的结 ...

  7. ssh架包下载地址

    1.连接MySQL数据库所需架包点击进入官网下载 2.连接Oracle数据库所需架包点击进入官网下载 3.JUnit测试所需架包点击进入官网下载或者点击进入官网下载 4.Struts所需架包点击进入官 ...

  8. bootstrap不兼容ie8如何解决

    说起bootstrap大家一定都不陌生,可以说是目前最受欢迎的前端框架,简洁.直观.强悍.移动设备优先的前端开发框架,让web开发更迅速.简单. 但是在实际运用中也会遇到各种各样的问题,比如最近项目中 ...

  9. 一次ORA-01555问题分析,及SQL优化。

    前言 客户说: 我在数据库上继续运行昨日的脚本,但发现有个子过程在运行10个小时后报错: 烦请协助看看... 错误码是:ORA-01555: snapshot too old: rollback se ...

  10. nodejs学习(一) ---- nodejs + express应用生成器 快速创建应用

    1.node安装及环境配置(自行百度) 2.express安装及配置 (自行百度) 3.通过应用生成器工具 express 快速创建应用骨架   全局安装应用生成器 : npm install exp ...