React
React.createClass()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| var NewClass = React.createClass({
getDefaultProps: function(){
return: {
prop1: "a",
prop2: "b"
}
},
getInitialState: function(){
return {
data: {}
}
},
render: function(){
},
componentDidMount: function(){
return (
<div className="newClass">
hello {this.props.name}!
</div>
)
}
})
|
ReactDOM.render()
1
2
3
4
| ReactDOM.render(
<NewClass name="galen" />,
document.getElementById("example")
)
|
顶层方法
1
2
3
4
5
| React.PropType.Array.isRequired
propTypes: {
name: React.PropTypes.Array.isRequired
}
|
参见Reuseable Component Prop Validation
1
2
| React.findDOMNode(this.refs.xxx)
this.refs.xxx.getDOMNode()
|
双向数据绑定
1
2
3
4
| mixin: [Reat.addons.LinkStateMixin]
valueLink={this.linkState("xxxx")}
checkedLink={this.linkState("xxxx")}
|
valueLink之后可以被props传递
组件生命周期
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
| getDefaultProps: function(){
return {
}
},
getInitialState: function(){
return {
}
},
componentWillMount: function(){
},
componentDidMount: function(){
},
shouldComponentUpdate: function(nextProp, nextState){
},
componentWillUpdate: function(){
},
componentDidUpdate: function(){
},
componentWillReceiceProps: function(){
}
unmountComponentAtNode(this)
|