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()
