1.ReactDOM.render
ReactDOM.render 是 React 的最基本方法，用于將模板轉為 HTML 語言，并插入指定的 DOM 節點。
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
2.JSX 語法
<表示標簽，{表示遇到代碼塊
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
3.組件React.createClass
class屬性需要寫成 className，for屬性需要寫成 htmlFor
var HelloMessage = React.createClass({
//輸出組件
//this.props
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('example')
);
4.this.props.children
this.props 對象的屬性與組件的屬性一一對應，但是有一個例外，就是 this.props.children 屬性。它表示組件的所有子節點
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.body
);
5.PropTypes
組件的屬性可以接受任意值，字符串、對象、函數等等都可以。有時，我們需要一種機制，驗證別人使用組件時，提供的參數是否符合要求。
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
6.**獲取真實的DOM節點ref
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>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
7.狀態機this.state
一開始有一個初始狀態，然后用戶互動，導致狀態變化，從而觸發重新渲染 UI
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
8.表單** 和onChange結合使用
\用戶在表單填入的內容，屬于用戶跟組件的互動，所以不能用 this.props 讀取
var Input = React.createClass({
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function () {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
});
ReactDOM.render(<Input/>, document.body);
9.組件的生命周期
Mounting：已插入真實 DOM
Updating：正在被重新渲染
Unmounting：已移出真實 DOM
will
函數在進入狀態之前調用，
did
函數在進入狀態之后調用，三種狀態共計五種處理函數。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
此外，React 還提供兩種特殊狀態的處理函數
componentWillReceiveProps(object nextProps)：已加載組件收到新的參數時調用
shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否重新渲染時調用
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},
componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
},
render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});
ReactDOM.render(
<Hello name="world"/>,
document.body
);
style={{opacity: this.state.opacity}}
10.Ajax
組件的數據來源，通常是通過 Ajax 請求從服務器獲取，可以使用 componentDidMount 方法設置 Ajax 請求，等到請求成功，再用 this.setState 方法重新渲染 UI
var UserGist = React.createClass({
getInitialState: function() {
return {
username: '',
lastGistUrl: ''
};
},
componentDidMount: function() {
$.get(this.props.source, function(result) {
var lastGist = result[0];
if (this.isMounted()) {
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}
}.bind(this));
},
render: function() {
return (
<div>
{this.state.username}'s last gist is
<a href={this.state.lastGistUrl}>here</a>.
</div>
);
}
});
ReactDOM.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
document.body
);
1.props和state的區別
don't use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time
State 僅僅用在交互性的操作中。
//是不是從props屬相傳遞過來的
Is it passed in from a parent via props?
If so, it probably isn't state.
//是不是一直未變化
Does it remain unchanged over time?
If so, it probably isn't state.
//是不是基于其他的state或者props
Can you compute it based on any other state or props in your component?
If so, it isn't state.
2.自上而下 or 自下而上設計
In simpler examples, it's usually easier to go top-down, and on larger projects, it's easier to go bottom-up and write tests as you build.
在簡單的應用中適合自上而下的設計，在復雜的應用中適合自下而上設計組件。
3.如何確定state的歸屬
Identify every component that renders something based on that state.
//最上面的一個,一般是共有的
Find a common owner component (a single component above all
the components that need the state in the hierarchy).
Either the common owner or another component higher up in the
hierarchy should own the state.
//如果不確定就自己創建一個
If you can't find a component where it makes sense to own the
state, create a new component simply for holding the state and
add it somewhere in the hierarchy above the common owner
component.
