摘自阮一峰：React入門實例教程，轉載請注明出處。

?

一、獲取真實的DOM節點

　　組件并不是真實的 DOM 節點，而是存在于內存之中的一種數據結構，叫做虛擬 DOM （virtual DOM）。只有當它插入文檔以后，才會變成真實的 DOM 。根據 React 的設計，所有的 DOM 變動，都先在虛擬 DOM 上發生，然后再將實際發生變動的部分，反映在真實 DOM上，這種算法叫做 DOM diff ，它可以極大提高網頁的性能表現。

　　但是，有時需要從組件獲取真實 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') );

　　上面代碼中，組件 MyComponent 的子節點有一個文本輸入框，用于獲取用戶的輸入。這時就必須獲取真實的 DOM 節點，虛擬 DOM 是拿不到用戶輸入的。為了做到這一點，文本輸入框必須有一個 ref 屬性，然后 this.refs.[refName] 就會返回這個真實的 DOM 節點。

　　需要注意的是，由于 this.refs.[refName] 屬性獲取的是真實 DOM ，所以必須等到虛擬 DOM 插入文檔以后，才能使用這個屬性，否則會報錯。上面代碼中，通過為組件指定 Click 事件的回調函數，確保了只有等到真實 DOM 發生 Click 事件之后，才會讀取 this.refs.[refName] 屬性。

　　React 組件支持很多事件，除了 Click 事件以外，還有 KeyDown 、Copy、Scroll 等，完整的事件清單請查看官方文檔。

?

二、this.state 組件狀態

　　組件免不了要與用戶互動，React的一大創新，就是將組件看成是一個狀態機，一開始有一個初始狀態，然后用戶互動，導致狀態變化，從而觸發重新渲染 UI。

var LikeButton = React.createClass({getInitialState: function() { //定義初始狀態，也就是一個對象return {liked: false};},handleClick: function(event) {this.setState({liked: !this.state.liked}); //通過this.state屬性讀取定義的狀態//每次修改以后，自動調用 this.render 方法，再次渲染組件},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') );

　　上面代碼是一個 LikeButton 組件，它的 getInitialState 方法用于定義初始狀態，也就是一個對象，這個對象可以通過 this.state 屬性讀取。當用戶點擊組件，導致狀態變化，this.setState 方法就修改狀態值，每次修改以后，自動調用 this.render 方法，再次渲染組件。

　　由于 this.props 和 this.state 都用于描述組件的特性，可能會產生混淆。一個簡單的區分方法是，this.props 表示那些一旦定義，就不再改變的特性，而 this.state 是會隨著用戶互動而產生變化的特性。

?

三、表單

　　用戶在表單填入的內容，屬于用戶跟組件的互動，所以不能用 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);

　　上面代碼中，文本輸入框的值，不能用 this.props.value 讀取，而要定義一個 onChange 事件的回調函數，通過 event.target.value 讀取用戶輸入的值。textarea 元素、select元素、radio元素都屬于這種情況.

?

四、組件的生命周期

　　組件的生命周期分成三個狀態：

Mounting：已插入真實 DOM Updating：正在被重新渲染 Unmounting：已移出真實 DOM

　　React 為每個狀態都提供了兩種處理函數，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 );

　　上面代碼在hello組件加載以后，通過 componentDidMount方法設置一個定時器，每隔100毫秒，就重新設置組件的透明度，從而引發重新渲染。

　　另外，組件的style屬性的設置方式也值得注意，不能寫成

style="opacity:{this.state.opacity};"

　　而要寫成

style={{opacity: this.state.opacity}}

　　這是因為 React 組件樣式是一個對象，所以第一重大括號表示這是 JavaScript 語法，第二重大括號表示樣式對象。

?

五、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 );

　　上面代碼使用 jQuery 完成 Ajax 請求，這是為了便于說明。React 本身沒有任何依賴，完全可以不用jQuery，而使用其他庫。

轉載于:https://www.cnblogs.com/lishuxue/p/6121775.html

總結

以上是生活随笔為你收集整理的React 入门学习笔记2的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。