瀏覽器中的工作原理 · React入門指南

React提供了強大的抽象，讓你在大多數應用場景中不再直接操作DOM，但是有時你需要簡單地調用底層的API，或者借助于第三方庫或已有的代碼。 ## 虛擬DOM React是很快的，因為它從不直接操作DOM。React在內存中維護一個快速響應的DOM描述。`render()`方法返回一個DOM的_描述_，React能夠利用內存中的描述來快速地計算出差異，然后更新瀏覽器中的DOM。另外，React實現了一個完備的虛擬事件系統，盡管各個瀏覽器都有自己的怪異行為，React確保所有事件對象都符合W3C規范，并且持續冒泡，用一種高性能的方式跨瀏覽器（and everything bubbles consistently and in a performant way cross-browser）。你甚至可以在IE8中使用一些HTML5的事件！大多數時候你應該呆在React的“虛擬瀏覽器”世界里面，因為它性能更加好，并且容易思考。但是，有時你簡單地需要調用底層的API，或許借助于第三方的類似于jQuery插件這種庫。React為你提供了直接使用底層DOM API的途徑。 ## Refs和getDOMNode() 為了和瀏覽器交互，你將需要對DOM節點的引用。每一個掛載的React組件有一個`getDOMNode()`方法，你可以調用這個方法來獲取對該節點的引用。 > 注意： > > `getDOMNode()`僅在掛載的組件上有效（也就是說，組件已經被放進了DOM中）。如果你嘗試在一個未被掛載的組件上調用這個函數（例如在創建組件的`render()`函數中調用`getDOMNode()`），將會拋出異常。為了獲取一個到React組件的引用，你可以使用`this`來得到當前的React組件，或者你可以使用refs來指向一個你擁有的組件。它們像這樣工作： ~~~ var MyComponent = React.createClass({ handleClick: function() { // Explicitly focus the text input using the raw DOM API. this.refs.myTextInput.getDOMNode().focus(); }, render: function() { // The ref attribute adds a reference to the component to // this.refs when the component is mounted. return ( <div> <input type="text" ref="myTextInput" /> <input type="button" value="Focus the text input" onClick={this.handleClick} /> </div> ); } }); React.render( <MyComponent />, document.getElementById('example') ); ~~~ ## 更多關于Refs 為了學習更多有關Refs的內容，包括如何有效地使用它們，參考我們的[更多關于Refs](http://reactjs.cn/react/docs/more-about-refs.html)文檔。 ## 組件生命周期組件的生命周期包含三個主要部分： * **掛載：**?組件被插入到DOM中。 * **更新：**?組件被重新渲染，查明DOM是否應該刷新。 * **移除：**?組件從DOM中移除。 React提供生命周期方法，你可以在這些方法中放入自己的代碼。我們提供**will**方法，會在某些行為發生之前調用，和**did**方法，會在某些行為發生之后調用。 ### 掛載 * `getInitialState(): object`在組件被掛載之前調用。狀態化的組件應該實現這個方法，返回初始的state數據。 * `componentWillMount()`在掛載發生之前立即被調用。 * `componentDidMount()`在掛載結束之后馬上被調用。需要DOM節點的初始化操作應該放在這里。 ### 更新 * `componentWillReceiveProps(object nextProps)`當一個掛載的組件接收到新的props的時候被調用。該方法應該用于比較`this.props`和`nextProps`，然后使用`this.setState()`來改變state。 * `shouldComponentUpdate(object nextProps, object nextState): boolean`當組件做出是否要更新DOM的決定的時候被調用。實現該函數，優化`this.props`和`nextProps`，以及`this.state`和`nextState`的比較，如果不需要React更新DOM，則返回false。 * `componentWillUpdate(object nextProps, object nextState)`在更新發生之前被調用。你可以在這里調用`this.setState()`。 * `componentDidUpdate(object prevProps, object prevState)`在更新發生之后調用。 ### 移除 * `componentWillUnmount()`在組件移除和銷毀之前被調用。清理工作應該放在這里。 ### 掛載的方法（Mounted Methods） _掛載的_復合組件也支持如下方法： * `getDOMNode(): DOMElement`可以在任何掛載的組件上面調用，用于獲取一個指向它的渲染DOM節點的引用。 * `forceUpdate()`當你知道一些很深的組件state已經改變了的時候，可以在該組件上面調用，而不是使用`this.setState()`。 ## 跨瀏覽器支持和兼容代碼（Browser Support and Polyfills）在Facebook，我們支持低版本的瀏覽器，包括IE8。我們已經寫好兼容代碼很長時間了，這能讓我們寫有遠見的JS。這意味著我們沒有零散的駭客代碼充斥在我們的代碼庫里面，并且我們依然能夠預計我們的代碼“正常工作起來”。例如，不使用`+new Date()`，我們能夠寫`Date.now()`。 At Facebook, we support older browsers, including IE8\. We've had polyfills in place for a long time to allow us to write forward-thinking JS. This means we don't have a bunch of hacks scattered throughout our codebase and we can still expect our code to "just work". For example, instead of seeing?`+new Date()`, we can just write?`Date.now()`. Since the open source React is the same as what we use internally, we've carried over this philosophy of using forward thinking JS. In addition to that philosophy, we've also taken the stance that we, as authors of a JS library, should not be shipping polyfills as a part of our library. If every library did this, there's a good chance you'd be sending down the same polyfill multiple times, which could be a sizable chunk of dead code. If your product needs to support older browsers, chances are you're already using something like?[es5-shim](https://github.com/kriskowal/es5-shim). ### 支持低版本瀏覽器的兼容代碼 [kriskowal的es5-shim](https://github.com/kriskowal/es5-shim)?`es5-shim.js`?提供了以下react需要的api： * `Array.isArray` * `Array.prototype.every` * `Array.prototype.forEach` * `Array.prototype.indexOf` * `Array.prototype.map` * `Date.now` * `Function.prototype.bind` * `Object.keys` * `String.prototype.split` * `String.prototype.trim` [kriskowal的es5-shim](https://github.com/kriskowal/es5-shim)?`es5-sham.js`?同樣提供了以下react需要的api： * `Object.create` * `Object.freeze` The unminified build of React needs the following from?[paulmillr's console-polyfill](https://github.com/paulmillr/console-polyfill). * `console.*` When using HTML5 elements in IE8 including?``,?``,?``,?``, and?``, it's also necessary to include?[html5shiv](https://github.com/aFarkas/html5shiv)?or a similar script. ### Cross-browser Issues Although React is pretty good at abstracting browser differences, some browsers are limited or present quirky behaviors that we couldn't find a workaround for. #### onScroll event on IE8 On IE8 the?`onScroll`?event doesn't bubble and IE8 doesn't have an API to define handlers to the capturing phase of an event, meaning there is no way for React to listen to these events. Currently a handler to this event is ignored on IE8. See the?[onScroll doesn't work in IE8](https://github.com/facebook/react/issues/631)?GitHub issue for more information. ve carried over this philosophy of using forward thinking JS. In addition to that philosophy, we've also taken the stance that we, as authors of a JS library, should not be shipping polyfills as a part of our library. If every library did this, there's a good chance you'd be sending down the same polyfill multiple times, which could be a sizable chunk of dead code. If your product needs to support older browsers, chances are you're already using something like?[es5-shim](https://github.com/kriskowal/es5-shim). ### Polyfills Needed to Support Older Browsers `es5-shim.js`?from?[kriskowal's es5-shim](https://github.com/kriskowal/es5-shim)?provides the following that React needs: * `Array.isArray` * `Array.prototype.every` * `Array.prototype.forEach` * `Array.prototype.indexOf` * `Array.prototype.map` * `Date.now` * `Function.prototype.bind` * `Object.keys` * `String.prototype.split` * `String.prototype.trim` `es5-sham.js`, also from?[kriskowal's es5-shim](https://github.com/kriskowal/es5-shim), provides the following that React needs: * `Object.create` * `Object.freeze` The unminified build of React needs the following from?[paulmillr's console-polyfill](https://github.com/paulmillr/console-polyfill). * `console.*` When using HTML5 elements in IE8 including?``,?``,?``,?``, and?``, it's also necessary to include?[html5shiv](https://github.com/aFarkas/html5shiv)?or a similar script. ### Cross-browser Issues Although React is pretty good at abstracting browser differences, some browsers are limited or present quirky behaviors that we couldn't find a workaround for. #### onScroll event on IE8 On IE8 the?`onScroll`?event doesn't bubble and IE8 doesn't have an API to define handlers to the capturing phase of an event, meaning there is no way for React to listen to these events. Currently a handler to this event is ignored on IE8. See the?[onScroll doesn't work in IE8](https://github.com/facebook/react/issues/631)?GitHub issue for more information.