• React基礎

//ReactDOM.render(reactWhat,domWhere)在瀏覽器中渲染應用的一種途徑 //React.DOM表示預定義好的HTML元素集合 //React.DOM.h1(attributes,children)表示一個預定義的React 組件 //h1()第一個參數接收一個對象，用于指定該組件的任何屬性（比如id屬性，三個特殊屬性class:className，for:htmlFor,style:對象形式賦值）。 //h1()第二個參數定義了該組件的子元素（Hello world!） //document.getElementById("app") 方法訪問DOM 節點，告訴React 需要把應用渲染在頁面的哪個部分 ReactDOM.render(React.DOM.h1({id: 'my-heading' }, 'Hello world!'), document.getElementById('app'));// JSX版本 ReactDOM.render(<h1 id="my-heading" ><span><em>Hell < /em>o</span > world!< /h1>, document.getElementById('app') ); 復制代碼

• 自定義新組件

//自定義新組件 var Component = React.createClass({//該對象需要包含一個名為render() 的方法來顯示組件render: function () {//該方法必須返回一個React 組件，不能只返回文本內容。return React.DOM.span(null, 'I\'m so custom');} }); //使用自定義組件 ReactDOM.render(//React.createElement() 是創建組件“實例”的方法之一React.createElement(Component),//如果你想創建多個實例，還有另一種途徑，就是使用工廠方法:React.createFactory(Component);document.getElementById('app') ); 復制代碼

• props和propTypes

//自定義的組件可以接收屬性，所有屬性都可以通過this.props對象獲取 var Component = React.createClass({//propTypes是可選的，聲明組件需要接收的屬性列表及其對應類型propTypes: {//清晰地指明了name 屬性是一個必須提供的字符串值name: React.PropTypes.string.isRequired,middleName: React.PropTypes.string,},//getDefaultProps() 方法返回一個對象，并為每個可選屬性（不帶.isRequired的屬性）提供了默認值。getDefaultProps: function () {return {middleName: 'chris'};},render: function () {//請把this.props 視作只讀屬性。從父組件傳遞配置到子組件時，屬性非常重要return React.DOM.span(null, 'My name is ' + this.props.name);} }); ReactDOM.render(React.createElement(Component, {name: 'Bob'}),document.getElementById('app') ); 復制代碼

• 帶狀態的文本框組件

var TextAreaCounter = React.createClass({propTypes: {text: React.PropTypes.string,},getDefaultProps: function () {return {text: '',};},// 無狀態版本render: function () {return React.DOM.div(null,//文本框使用了defaultValue 屬性，而不是你在常規HTML 中習慣使用的文本子元素React.DOM.textarea({defaultValue: this.props.text,}),React.DOM.h3(null, this.props.text.length));},// 有狀態版本（狀態state負責組件內部數據的維護）_textChange: function (ev) {//數據發生改變時（即用戶在文本框中輸入內容時），組件可以通過一個事件監聽器更新statethis.setState({//改變state 必須使用this.setState() 方法。該方法接收一個對象參數，并把對象與this.state 中已存在的數據進行合并text: ev.target.value,});},getInitialState: function () {//在初始化時，定義state中需要包含的屬性，以保證可以通過this.state.text訪問屬性return {text: this.props.text,};},render: function () {return React.DOM.div(null,//文本框使用了defaultValue 屬性，而不是你在常規HTML 中習慣使用的文本子元素React.DOM.textarea({value: this.state.text,//React 使用了合成事件來消除瀏覽器之間的不一致情況，React 在事件處理中使用駝峰法命名。//當用戶輸入時觸發。而不是像原生DOM 事件那樣，在用戶結束輸入并把焦點從輸入框移走時才觸發。onChange: this._textChange,}),React.DOM.h3(null, this.state.text.length));} }); // 使用自定義組件 ReactDOM.render(React.createElement(TextAreaCounter, {text: "Bob",}),document.getElementById("app") ); 復制代碼

• 從外部訪問組件(謹慎使用)

var myTextAreaCounter = ReactDOM.render(React.createElement(TextAreaCounter, {defaultValue: "Bob",}),document.getElementById("app") ); //設置了新的state 值 myTextAreaCounter.setState({ text: "Hello outside world!" }); //獲取了React 創建的父元素DOM 節點的引用 var reactAppNode = ReactDOM.findDOMNode(myTextAreaCounter); //獲取DOM 結構中首個<div id="app"> 節點。這也是你讓React 進行渲染的位置： reactAppNode.parentNode === document.getElementById('app'); // true //訪問組件的屬性和狀態 myTextAreaCounter.props; // Object { defaultValue: "Bob"} myTextAreaCounter.state; // Object { text: "Hello outside world!"} 復制代碼

• 中途改變屬性

//這個方法會接收新屬性對象，讓你可以根據新屬性設置state componentWillReceiveProps: function(newProps) {this.setState({text: newProps.defaultValue,}); }; 復制代碼

生命周期方法

初始化

getDefaultProps()

設置默認的props，也可以用dufaultProps設置組件的默認屬性. 對于組件類來說只調用一次，該組件類的所有后續應用，getDefaultPops 將不會再被調用

getInitialState()

在使用es6的class語法時是沒有這個鉤子函數的，可以直接在constructor中定義this.state。

對于組件的每個實例來說，這個方法的調用有且只有一次，用來初始化每個實例的 state，在這個方法里，可以訪問組件的 this.props。

getInitialState 和 getDefaultPops 的調用是有區別的，getDefaultPops 是對于組件類來說只調用一次，后續該類的應用都不會被調用， 而 getInitialState 是對于每個組件實例來講都會調用，并且只調一次。

componentWillMount()

組件初始化之后，首次渲染之前調用，以后組件更新不調用，整個生命周期只調用一次，是在render 方法調用之前修改 state 的最后一次機會。

render()

react最重要的步驟，創建虛擬dom，進行diff算法，更新dom樹都在此進行。此時就不能更改state了。 該方法會創建一個虛擬DOM，用來表示組件的輸出。對于一個組件來講，render方法是唯一一個必需的方法。

render方法需要滿足下面幾點：

(1)只能通過 this.props 和 this.state 訪問數據（不能修改）

(2)可以返回 null,false 或者任何React組件

(3)只能出現一個頂級組件，不能返回一組元素

(4)不能改變組件的狀態

(5)不能修改DOM的輸出

render方法返回的結果并不是真正的DOM元素，而是一個虛擬的表現，類似于一個DOM tree的結構的對象。react之所以效率高，就是這個原因。

componentDidMount()

組件渲染之后調用，只調用一次。 該方法被調用時，已經渲染出真實的 DOM，可以再該方法中通過 this.getDOMNode() 訪問到真實的 DOM(推薦使用 ReactDOM.findDOMNode())。

由于組件并不是真實的 DOM 節點，而是存在于內存之中的一種數據結構，叫做虛擬 DOM （virtual DOM）。只有當它插入文檔以后，才會變成真實的 DOM 。有時需要從組件獲取真實 DOM 的節點，這時就要用到 ref 屬性：

var Area = React.createClass({render: function () {this.getDOMNode(); //render調用時，組件未掛載，這里將報錯return <canvas ref='mainCanvas' >},componentDidMount: function () {var canvas = this.refs.mainCanvas.getDOMNode();//這是有效的，可以訪問到 Canvas 節點} }); 復制代碼

需要注意的是，由于 this.refs.[refName]屬性獲取的是真實 DOM ，所以必須等到虛擬 DOM 插入文檔以后，才能使用這個屬性，否則會報錯。

更新

此時組件已經渲染好并且用戶可以與它進行交互，比如鼠標點擊，手指點按，或者其它的一些事件，導致應用狀態的改變，你將會看到下面的方法依次被調用

componentWillReceiveProps(nextProps)

組件的 props 屬性可以通過父組件來更改，這時，componentWillReceiveProps 將來被調用。可以在這個方法里更新 state,以觸發 render 方法重新渲染組件。

componentWillReceiveProps: function(nextProps) {if (nextProps.checked !== undefined) {this.setState({checked: nextProps.checked})} } 復制代碼

shouldComponentUpdate(nextProps, nextState)

react性能優化非常重要的一環。 組件接受新的state或者props時調用，我們可以在此對比前后兩個props和state是否相同。 如果相同，則返回false阻止更新，因為相同的屬性狀態一定會生成相同的dom樹，這樣就不需要創造新的dom樹和舊的dom樹進行diff算法對比，節省大量性能

如果你確定組件的 props 或者state 的改變不需要重新渲染，可以通過在這個方法里通過返回 false 來阻止組件的重新渲染，返回 false 則不會執行 render 以及后面的 componentWillUpdate，componentDidUpdate 方法。

該方法是非必須的，并且大多數情況下不會使用。

componentWillUpdate(nextProps, nextState)

這個方法和 componentWillMount 類似，在組件接收到了新的 props 或者 state 即將進行重新渲染前，componentWillUpdate(object nextProps, object nextState) 會被調用。 注意此時可以修改state，但最好不要在此方面里再去更新 props 或者 state。

render()

組件渲染

componentDidUpdate()

這個方法和 componentDidMount 類似，在組件重新被渲染之后，componentDidUpdate(object prevProps, object prevState) 會被調用。可以在這里訪問并修改 DOM。

卸載

componentWillUnmount()

組件將要卸載時調用，一些事件監聽和定時器需要在此時清除。

// 組件卸載 React.unmountComponentAtNode(this.props.containerNode[0]); 復制代碼

總結

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

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