JSX
- React 采用jsx语法,需用bable.js转义.
- JSX 语法可以和html 混写. html以< 开头, JSX以( 开头
- 采用ReactDOM.render 来定义React渲染
- 数组 {array} 在render方法会被concat(拼接)
- React.creatClass(new function() {}); 来创建一个新的React Component
var lol = React.createClass(
render: function() {
return <h1>Hello world! {this.props.name}</h1>
});
ReactDOM.render(
<HelloMessage name="jason" />,
document.getElementById('example')
);
- Component 的取名首字母必须大写
- 通过 React.Children来访问子节点:
<script type="text/babel">
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
});
- this.propTypes 定义组件接受的参数
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
- this.refs.{DOM} 来引用render的dom
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
});
getInitialState 在invoked before a component is mounted
use component attributes to register event handlers, just like
*onClick *onKeyDown onCopy
etc. Official Document has all supported eventsthis.state 描述变化量，可通过Ui操作更新.
this.props 表述component的属性，不可变React 生命周期
Mounting
These methods are called when an instance of a component is being created and inserted into the DOM:
constructor()
componentWillMount()
render()
componentDidMount()
Updating
An update can be caused by changes to props or state. These methods are called when a component is being re-rendered:
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
Unmounting
This method is called when a component is being removed from the DOM:
componentWillUnmount()
