•      propTypes、defaultProps 作为 properties 定义,也可以在组件外部通过键值对方式进行设置。

•      设置组件初始的 state不支持 getInitialState,可以在组件的constructor中通过this.state来设置,直接作为 properties 定义也可以。

•      不支持 mixins,可以使用高阶组件写法,或者 decorator。

1. 顶层API

最简单的React组件及渲染

react.js

Component API

react-dom.js

react-dom-server.js

2. jsx语法

类似 xml 的语法,用来描述组件树

不用JSX,用React提供的API写的话

2.1 注释、命名、根元素个数、JSX 嵌入变量

  • React只有一个限制, 组件只能渲染单个根节点。如果你想要返回多个节点,它们必须被包含在同一个节点里。

2.2 styles

2.3 JSX SPREAD

可以用通过 {...obj} 来批量设置一个对象的键值对到组件的属性,注意顺序

2.4 属性名不能和 js 关键字冲突

例如:className, readOnly, htmlfor

3. 数据流:state props propType

3.1 state && setState

用状态控制组件变化 可以把一个组件看做一个状态机, 每一次状态对应于组件的一个 ui

组件内部的状态,可以使用 state

3.2 props

通过 this.props 可以获取传递给该组件的属性值,还可以通过定义 getDefaultProps 来指定默认属性值(这是ES5的写法,ES6定义组件的默认props可以直接写props)

下面几个是props的常用API:

•     this.props.children

•    this.props.map

•    this.props.filter

props是调用组件的时候传递进去的数据,一般用于组件树数据传递

3.3 propTypes

通过指定 propTypes 可以校验props属性值的类型,校验可提升开发者体验,用于约定统一的接口规范。

React基础知识点全解的更多相关文章

  1. [转载] Python数据类型知识点全解

    [转载] Python数据类型知识点全解 1.字符串 字符串常用功能 name = 'derek' print(name.capitalize()) #首字母大写 Derek print(name.c ...

  2. c# 实用精华知识点全解

    本文介绍c#的实用知识点 写在前面(通识) vs常用快捷键 F5 调试运行程序 ctrl F5 不调试运行程序 F11 逐条语句调试 F10 逐过程调试程序 注释快捷键 ctrl + k + c 代码 ...

  3. js面试题知识点全解(一变量类型和计算)

    1.js中使用typeof能得到哪些类型 2.何时使用===和== 3.js中的内置函数 4.js变量按存储方式区分为哪些类型,并描述其特点 5.如何理解json 以下对这些问题的知识点做一些总结: ...

  4. js面试题知识点全解(一原型和原型链1)

    1.如何准确判断一个变量是数组类型2.写一个原型链继承的例子3.描述new一个对象的过程4.zepto(或其他框架)源码中如何使用原型链知识点:1.构造函数2.构造函数-扩展3.原型规则和示例4.原型 ...

  5. js面试题知识点全解(一作用域和闭包)

    问题: 1.说一下对变量提升的理解 2.说明this几种不同的使用场景 3.如何理解作用域 4.实际开发中闭包的应用 知识点: js没有块级作用域只有函数和全局作用域,如下代码: if(true){ ...

  6. js面试题知识点全解(一作用域)

    问题: 1.说一下对变量提升的理解 2.说明this几种不同的使用场景 3.如何理解作用域 4.实际开发中闭包的应用 知识点: js没有块级作用域只有函数和全局作用域,如下代码: if(true){ ...

  7. js面试题知识点全解(一原型和原型链)

    1.如何准确判断一个变量是数组类型2.写一个原型链继承的例子3.描述new一个对象的过程4.zepto(或其他框架)源码中如何使用原型链知识点:1.构造函数2.构造函数-扩展3.原型规则和示例4.原型 ...

  8. js面试题知识点全解(一闭包)

    闭包使用场景:1.函数作为返回值,如下场景 function F1(){ var a = 100 //自由变量 //返回一个函数(函数作为返回值) return function(){ console ...

  9. Java并发基础知识点详解

    1.synchronized与Lock区别 父类有synchtonized,子类调用父类的同步方法,是没办法同步的,因为synchronized不是修饰符,不会被继承下来. synchronized ...

随机推荐

  1. dtd对xml没有起到约束作用

    问题如题. dtd: xml: BUG很明显,但是xml并没有提示错误信息.xml文档校验设置正常. 此处原因: dtd中元素与子元素设置之间缺少空格: 加上空格后正常报错:

  2. yiii 数据库备份导出

    应用场景 数据对于网站来说 是非常重要的 一般 cms 后台 都有 数据备份功能.使用Yii 的第三方拓展 可以快速开发. spanjeta/yii2-backup spanjeta/yii2-bac ...

  3. WCF与各语言通信框架比较

  4. Hadoop(2)_机器信息分布表

    1.分布式环境搭建 采用4台安装Linux环境的机器来构建一个小规模的分布式集群. 图1 集群的架构 其中有一台机器是Master节点,即名称节点,另外三台是Slaver节点,即数据节点.这四台机器彼 ...

  5. HDU 1215

    由算术基本定理, 直接使用公式就好 #include <iostream> #include <cstdio> #include <algorithm> #incl ...

  6. 使用gridlayout布局后,因某些原因又删除,并整理文件夹结构时,Unable to resolve target &#39;android-7&#39;

    出现的问题 [2013-01-11 10:52:39 - gridlayout_v7] Unable to resolve target 'android-7' 事由:在一次做九宫格时.误使用了gri ...

  7. python爬虫系列序

    关于爬虫的了解,始于看到这篇分析从数据角度解析福州美食,和上份工作中的短暂参与. 长长短短持续近一年的时间,对其态度越来越明晰,噢原来这就是我想从事的工作. 于是想要系统学习的心理便弥散开来…… 参考 ...

  8. Google C++ style guide——格式

    1.行长度 每一行代码字符数不超过80. 例外: 1)假设一行凝视包括了超过80字符的命令或URL,出于复制粘贴的方便能够超过80字符: 2)包括长路径的能够超出80列,尽量避免: 3)头文件保护能够 ...

  9. ContextMenu的使用具体解释

    二话不说,先上图: 能够非常easy看到这是一个类似于Dialog悬浮在活动上的控件,它是由被注冊的view长按所触发的. 当然啦,也有其它的实现方式,这里就先介绍一下系统的ContextMenu:( ...

  10. .net mvc Model 验证总结

    ASP.NET MVC4中的Model是自验证的,这是通过.NET4的System.ComponentModel.DataAnnotations命名空间完毕的. 我们要做的仅仅是给Model类的各属性 ...