React react支持IE9+

組建的生命周期

react組件生命周期圖例

掛載

• getInitialState es5中使用的初始化狀態(tài)componentWillMount() - 組件實(shí)例即將掛接（初次渲染）時被調(diào)用，這個方法在整個生命周期中只會被調(diào)用一次。

render()-這里說一下，組件的中render函數(shù)返回的是支撐實(shí)例（vercialDOM），reactDOM.render()返回組件的支撐實(shí)例（backing instance）——組建的描述。無狀態(tài)組件沒有支撐實(shí)例返回null。

• componentDidMount() - 組件實(shí)例掛接（初次渲染）后被調(diào)用 ，這個方法在整個生命周期中只會被調(diào)用一次。
  更新
• componentWillReceiveProps(nextProps) - 組件實(shí)例即將設(shè)置新屬性時被調(diào)用，參數(shù)nextProps表示即將應(yīng)用到組件實(shí)例上的新屬性值。這個方法在初次渲染時不會被調(diào)用。在此方法內(nèi)調(diào)用setState()不會引起重新渲染。
• shouldComponentUpdate(nextProps, nextState) - 組件實(shí)例即將重新渲染時被調(diào)用，參數(shù)nextProps傳入即將應(yīng)用到組件實(shí)例上的新屬性值，參數(shù)nextState傳入組件實(shí)例即將被設(shè)置的狀態(tài)值。如果這個方法返回false，那么組件實(shí)例就不會被重新渲染。除非我們明確地 知道，新的屬性和狀態(tài)不需要進(jìn)行重新渲染，否則這個方法都應(yīng)該返回true。這個方法在初次渲染時或通過forceUpdate()方法進(jìn)行渲染時不會被調(diào)用。
• componentWillUpdate(nextProps, nextState) - 組件實(shí)例即將重新渲染時被調(diào)用 這個方法在初次渲染時不會被調(diào)用。注意：不能在此方法內(nèi)調(diào)用setState()。
  銷毀
• componentDidUpdate(prevProps, prevState) - 組件實(shí)例重新渲染后被調(diào)用，這個方法在初次渲染時不會被調(diào)用。銷毀componentWillUnmount() - 組件實(shí)例即將從DOM樹移除時被調(diào)用，這個方法在整個生命周期中只會被調(diào)用一次。
  可調(diào)用的方法
  component.forceUpdate()-在任何生命周期階段調(diào)用，當(dāng)你知道一些底層方面組件狀態(tài)的改動且不適用于this.setState的時候。

state 與 props使用場景

• 事件處理后值發(fā)生變化反映到UI界面上變化的，使用state
• 使用props作為唯一的數(shù)據(jù)來源
• 減少把props的值賦值給state
• 把對于state 和 props 計(jì)算用于展示的邏輯放在render中

es6 寫法不同于 es5的地方以及最佳實(shí)踐

//es6寫法
export class Counter extends React.Component { constructor(props) { super(props); this.state = {count: props.initialCount}; this.tick = this.tick.bind(this); } tick() { this.setState({count: this.state.count + 1}); } render() { return ( <div onClick={this.tick}> Clicks: {this.state.count} </div> ); }}Counter.propTypes = { initialCount: React.PropTypes.number };Counter.defaultProps = { initialCount: 0 };

• 沒有g(shù)etIntialState 方法，state的初始化在構(gòu)造函數(shù)中進(jìn)行
• propTypes 與defaultProps被定義為屬性
• 沒有為事件自動綁定，需要如下手動綁定或使用箭頭函數(shù)綁定

// You can use bind() to preserve `this`<div onClick={this.tick.bind(this)}>// Or you can use arrow functions<div onClick={() => this.tick()}>

最佳實(shí)踐在這里

···
constructor(props) { super(props); this.state = {count: props.initialCount}; this.tick = this.tick.bind(this);}···<div onClick={this.tick}>

• 不再支持mixin+ 無狀態(tài)組件寫法

盡可能使用無狀態(tài)組件寫法，盡管他不能通過ref引用到

JSX 中使用

...
傳遞列出當(dāng)前使用不需要繼續(xù)傳遞下去的

javascript render(){ var {checked, ...other} = this.props; fancyClass = checked ? 'FancyCheckd' : 'FancyUnchecked'; return(<div {...other} className={fancyClass}</div>)  }

checkboxes 與 Radio 潛在問題

Be aware that, in an attempt to normalize change handling for checkbox and radio inputs, React uses a click event in place of a change event. For the most part this behaves as expected, except when calling preventDefault in a change handler. preventDefault stops the browser from visually updating the input, even if checked gets toggled. This can be worked around either by removing the call to preventDefault, or putting the toggle of checked in a setTimeout.

ref

ref —— 回調(diào)屬性當(dāng)組件創(chuàng)建完成后，ref回調(diào)會被立即執(zhí)行。對應(yīng)的元素會作為參數(shù)傳入函數(shù)中，回調(diào)函數(shù)可以立即使用參數(shù)，也可以將它保存起來。

render: function() { return <TextInput ref={(c) => this._input = c} />; }, componentDidMount: function() { this._input.focus(); },

如果ref綁定的元素是原生組件，返回的是支撐實(shí)例，如果是自定義組件，返回的是該組件的實(shí)例，可以調(diào)用該組件暴露的方法。如果使用行內(nèi)函數(shù)表達(dá)式的方式寫的refs，react在組件更新的之后，把它看作為不同的函數(shù)對象，回調(diào)函數(shù)會被傳入null執(zhí)行。ref ——字符串屬性現(xiàn)階段被兼容處理，未來會被移除，回調(diào)方式是被推薦的，（于是不看了）。一個復(fù)雜的例子

MyComponent = React.createClass({ handleClick: function() { // Explicitly focus the text input using the raw DOM API. if (this.myTextInput !== null) { this.myTextInput.focus(); } }, render: function() { // The ref attribute is a callback that saves a reference to the // component to this.myTextInput when the component is mounted. return ( <div> <input type="text" ref={(ref) => this.myTextInput = ref} /> <input type="button" value="Focus the text input" onClick={this.handleClick} /> </div> ); }});ReactDOM.render( <MyComponent />, document.getElementById('example'));

例子中，我們或得支撐實(shí)例的引用，當(dāng)button點(diǎn)擊的時候input被focus。
小結(jié)
當(dāng)在使用常規(guī)數(shù)據(jù)流（改變子組件props）不方便的情況下，ref是一種很好的傳送信息給組件實(shí)例的方式。默認(rèn)情況下，使用react數(shù)據(jù)流保存ref備用。

便利

• 子組件中定義的public方法，可以通過ref的方式被外部組件調(diào)用。（能使用數(shù)據(jù)流方式還是使用數(shù)據(jù)流方式，因?yàn)檫@樣更加清晰）
• 對于測量dom節(jié)點(diǎn)樣式，這是唯一適用方法。
• 當(dāng)內(nèi)容被銷毀，ref的引用一同被銷毀，這里無須擔(dān)心銷毀的問題。

注意：
永遠(yuǎn)不要再render方法中引用
第二條是關(guān)于字符串方式引用的不看了……
無狀態(tài)組件中不能使用