React react支持IE9+
組建的生命周期
掛載
- getInitialState es5中使用的初始化狀態(tài)componentWillMount() - 組件實(shí)例即將掛接（初次渲染）時(shí)被調(diào)用佑吝，這個(gè)方法在整個(gè)生命周期中只會(huì)被調(diào)用一次芥丧。
render()-這里說(shuō)一下，組件的中render函數(shù)返回的是支撐實(shí)例（vercialDOM）氛赐，reactDOM.render()返回組件的支撐實(shí)例（backing instance）——組建的描述筷登。無(wú)狀態(tài)組件沒(méi)有支撐實(shí)例返回null剃根。
- componentDidMount() - 組件實(shí)例掛接（初次渲染）后被調(diào)用 ，這個(gè)方法在整個(gè)生命周期中只會(huì)被調(diào)用一次前方。
更新 - componentWillReceiveProps(nextProps) - 組件實(shí)例即將設(shè)置新屬性時(shí)被調(diào)用狈醉，參數(shù)nextProps表示即將應(yīng)用到組件實(shí)例上的新屬性值。這個(gè)方法在初次渲染時(shí)不會(huì)被調(diào)用惠险。在此方法內(nèi)調(diào)用setState()不會(huì)引起重新渲染苗傅。
- shouldComponentUpdate(nextProps, nextState) - 組件實(shí)例即將重新渲染時(shí)被調(diào)用，參數(shù)nextProps傳入即將應(yīng)用到組件實(shí)例上的新屬性值班巩，參數(shù)nextState傳入組件實(shí)例即將被設(shè)置的狀態(tài)值渣慕。如果這個(gè)方法返回false，那么組件實(shí)例就不會(huì)被重新渲染趣竣。除非我們明確地 知道摇庙，新的屬性和狀態(tài)不需要進(jìn)行重新渲染，否則這個(gè)方法都應(yīng)該返回true遥缕。這個(gè)方法在初次渲染時(shí)或通過(guò)forceUpdate()方法進(jìn)行渲染時(shí)不會(huì)被調(diào)用卫袒。
- componentWillUpdate(nextProps, nextState) - 組件實(shí)例即將重新渲染時(shí)被調(diào)用 這個(gè)方法在初次渲染時(shí)不會(huì)被調(diào)用。注意：不能在此方法內(nèi)調(diào)用setState()单匣。
銷毀 - componentDidUpdate(prevProps, prevState) - 組件實(shí)例重新渲染后被調(diào)用夕凝，這個(gè)方法在初次渲染時(shí)不會(huì)被調(diào)用宝穗。銷毀componentWillUnmount() - 組件實(shí)例即將從DOM樹移除時(shí)被調(diào)用，這個(gè)方法在整個(gè)生命周期中只會(huì)被調(diào)用一次码秉。
可調(diào)用的方法
component.forceUpdate()-在任何生命周期階段調(diào)用逮矛，當(dāng)你知道一些底層方面組件狀態(tài)的改動(dòng)且不適用于this.setState的時(shí)候。
state 與 props使用場(chǎng)景
- 事件處理后值發(fā)生變化反映到UI界面上變化的转砖，使用state
- 使用props作為唯一的數(shù)據(jù)來(lái)源
- 減少把props的值賦值給state
- 把對(duì)于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 };
- 沒(méi)有g(shù)etIntialState 方法须鼎，state的初始化在構(gòu)造函數(shù)中進(jìn)行
- propTypes 與defaultProps被定義為屬性
- 沒(méi)有為事件自動(dòng)綁定，需要如下手動(dòng)綁定或使用箭頭函數(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+ 無(wú)狀態(tài)組件寫法
盡可能使用無(wú)狀態(tài)組件寫法府蔗，盡管他不能通過(guò)ref引用到
JSX 中使用
...
傳遞列出當(dāng)前使用不需要繼續(xù)傳遞下去的
javascript render(){ var {checked, ...other} = this.props; fancyClass = checked ? 'FancyCheckd' : 'FancyUnchecked'; return(<div {...other} className={fancyClass}</div>) }
checkboxes 與 Radio 潛在問(wèn)題
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)會(huì)被立即執(zhí)行。對(duì)應(yīng)的元素會(huì)作為參數(shù)傳入函數(shù)中姓赤，回調(diào)函數(shù)可以立即使用參數(shù)赡译，也可以將它保存起來(lái)。
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ù)對(duì)象红碑，回調(diào)函數(shù)會(huì)被傳入null執(zhí)行。ref ——字符串屬性現(xiàn)階段被兼容處理泡垃，未來(lái)會(huì)被移除析珊，回調(diào)方式是被推薦的，（于是不看了）蔑穴。一個(gè)復(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)擊的時(shí)候input被focus存和。
小結(jié)
當(dāng)在使用常規(guī)數(shù)據(jù)流（改變子組件props）不方便的情況下奕剃，ref是一種很好的傳送信息給組件實(shí)例的方式。默認(rèn)情況下捐腿，使用react數(shù)據(jù)流保存ref備用纵朋。
便利
- 子組件中定義的public方法，可以通過(guò)ref的方式被外部組件調(diào)用茄袖。（能使用數(shù)據(jù)流方式還是使用數(shù)據(jù)流方式操软，因?yàn)檫@樣更加清晰）
- 對(duì)于測(cè)量dom節(jié)點(diǎn)樣式，這是唯一適用方法宪祥。
- 當(dāng)內(nèi)容被銷毀聂薪，ref的引用一同被銷毀家乘，這里無(wú)須擔(dān)心銷毀的問(wèn)題。
注意：
永遠(yuǎn)不要再render方法中引用
第二條是關(guān)于字符串方式引用的不看了……
無(wú)狀態(tài)組件中不能使用
