其实react涉及的内容并不是很多，把react API整理了一下，版本为0.14.7。

React相关

创建组件

1
2
3
4
5
6
7
8
9
// 普通
React.createClass ({})

// class
class ExampleComponent extends React.Component () {}

// 无state的组件可以这样创建
var HelloMsg => function(props) { return <div>Hello {props.name}</div> }

ReactElement

1
2
3
4
5
6
7
8
// 返回ReactElement
React.createElement(HTMLTag|ReactClass, {props}?, [children...]?)

// 返回ReactElement
React.cloneElement(ReactElement, {props}?, [children...]?)

// 返回Boolean
React.isValidElement(ReactElement)

ReactDOM相关

1
2
3
4
5
6
7
8
9
// render
ReactDOM.render (ReactElement, DOMElement, callback?)

// 返回DOMElement
ReactDOM.findDOMNode(ReactComponent)

// DOM 中移除已经挂载的 React 组件
ReactDOM.unmountComponentAtNode(DOMElement)

服务器渲染ReactDOMServer

1
2
3
4
ReactDOMServer.renderToString (ReactElement)

// 不会在dom上创建react 属性， 如data-react-id
ReactDOMServer.renderToStaticMarkup (ReactElement)

组件Component API

1
2
3
4
5
6
7
8
9
10
11
12
// 改变状态
setState ( FunctiOn *|{ nextState }  ,  callBacK?  )

// 直接调用reaner()而跳过shouldComponentUpdate()
forceUpdate ( callBacK?  )

// 渲染
render (){}

// 初始化值
constructor ( props ) { super(props); this.state = {...} }

组件Component事件

1
2
3
4
5
6
7
8
9
10
11
12
13
componentWillMount ()

componentDidMount ()

componentWillReceiveProps ( {nextProps }  )

shouldComponentUpdate ( {nextProps }  ,  {nextState }  )

componentWillUpdate ( {nextProps }  ,  {nextState }  

componentDidUpdate ( {previousProps }  ,  {previousState }  )

componentWillUnmount ()

Tag相关

1
2
3
4
5
6
key < ExampleComponent  key = "uniqueValue" />

ref < ExampleComponent  ref ={ S tRing |c allBacK } />

dangerouslySetInnerHTML < span  dangerouslySetInnerHTML ={ __Html: String } />

Props相关

1
2
3
4
5
6
7
this.props.children < Component >{ this.props.children }</ Component >

... < ExampleComponent  { ... this.props} />

ReactComponentClass.defaultProps  = DefaultPropertiesObject

ReactComponentClass.propTypes  = PropertiesSpecificationObject

propTypes相关

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
React.PropTypes.array

React.PropTypes.bool

React.PropTypes.func

React.PropTypes.number

React.PropTypes.object

React.PropTypes.string

React.PropTypes.node (anything that can be rendered])

React.PropTypes.element (ReactElement)

React.PropTypes.instanceOf(Message) (must be of javascript type)

React.PropTypes.oneOf(['News', 'Photos']) (specify enumerated values)

React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]) (limit property types)

React.PropTypes.arrayOf(React.PropTypes.number) (limit to a typed array)

React.PropTypes.objectOf(React.PropTypes.number) (limit to a typed object)

React.PropTypes.shape({color: React.PropTypes.string, fontSize: React.PropTypes.number}) (limit to object with specific keys/types)

React.PropTypes.func.isRequired (produce an error if the property isn't passed to the child)

React.PropTypes.any.isRequired (can be any object but must be required)

(props, propName, componentName) => Boolean (create a custom property with the following function signature)