React基础知识点全解

•      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属性值的类型，校验可提升开发者体验，用于约定统一的接口规范。