React入門--------組件API

標籤：git   cal   component   api   img   render   node   this   htm   

setState

參數：nextState(object),[callback(function)]

設定nextState的某個索引值。通常如果希望在某個事件或某個回調中來重新渲染組件，setState是一個最常用的觸發方法，因為我們把UI內容跟state狀態直接綁定在一起，一旦state發生改變並觸動了綁定的邏輯，那麼ui內容自然也會跟著變動：

 var Component1 = React.createClass({        getInitialState: function() {            return {                isClick: !1            }        },        componentDidUpdate: function(){            console.log(‘componentDidUpdate‘)        },        clickCb: function() {            this.setState({                isClick : !0            }, function(){                console.log(this.state.isClick)            })        },        render: function() {            return (<div onClick={this.clickCb}>            isClick:{this.state.isClick ? ‘yes‘ : ‘nope‘}            </div>)        }    });    var div = document.getElementById(‘a‘);    ReactDOM.render(        <Component1 />, div    );

如上通過state.isClick來決定div內要顯示的內容，而我們點擊div時會改變state.isClick的狀態，從而觸發綁定條件更改了div中的內容。

運行結果如下：

注意：該方法的回調是在重新渲染之後執行的。

replaceState

參數：nextState(object),[callback(function)]

整體更換掉state，回調方法在重新渲染之後執行。

forceUpdate

參數：[callback(function)]

在任何調用的時候強制渲染組件，即使使用shouldComponentUpdata返回了false

注意：該方法的回調也是在重新渲染之後執行的。

getDOMNode

返回組件/ReactElment掛載到頁面上所對應的DOM元素

 var Component1 = React.createClass({        getInitialState: function() {            return {                isClick: !1            }        },        clickCb: function() {            this.setState({                isClick : !0            }, function(){                console.log(this.state.isClick)            })        },        render: function() {            return (<div onClick={this.clickCb}>            isClick:{this.state.isClick ? ‘yes‘ : ‘nope‘}            </div>)        }    });    var div = document.getElementById(‘a‘);    var c = ReactDOM.render(        <Component1 />, div    );    console.log(c.getDOMNode())

isMounted

返回一個布爾值，如果組件掛載到了dom中，isMounted()返回true

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

setProps

參數：nextProps(object),[callback(function)]

和setState類似，不過修改的是props。

replaceProps

參數：nextProps(object),[callback(function)]

和replaceState類似，不過修改的是props。

refs

這個方法不屬於組件，但也是在組件中常用的一個小技巧

在前面中提到，可以使用ReactClass.getDOMNode()的方法來擷取到組件渲染在頁面上的DOM節點，但是如果希望擷取到的，是組件中的某個DOM元素呢

 var Component1 = React.createClass({        clickCb: function(e) {            if(e.target === this.refs.li2.getDOMNode()){                alert(‘你點到第二個LI了‘)            }        },        render: function() {            return (<ul onClick={this.clickCb}>                <li>1</li>                <li ref="li2">2</li>                <li>3</li>            </ul>)        }    });    var div = document.getElementById(‘a‘);    ReactDOM.render(            <Component1 />, div    );

組件中的第二個li綁定了一個ref屬性，值為li2，這意味著可以在組件中以this.refs.li2的形式來擷取到改ReactElement。然後綁定點擊事件，在點擊的時候判斷被點擊的li元素是否等於this.refs.lis.getDOMNode9()。

下面再看一個例子：

 var App = React.createClass({    getInitialState: function() {      return {userInput: ‘‘};    },    handleChange: function(e) {      this.setState({userInput: e.target.value});    },    clearAndFocusInput: function() {      // Clear the input      this.setState({userInput: ‘‘}, function() {        // 組件重繪後會立即執行這句代碼：        this.refs.theInput.getDOMNode().focus();   // input成功聚焦（focus）      });    },    render: function() {      return (        <div>          <div onClick={this.clearAndFocusInput}>            Click to Focus and Reset          </div>          <input            ref="theInput" //我們可以在組件裡以 this.refs.theInput 擷取到它            value={this.state.userInput}            onChange={this.handleChange}          />        </div>      );    }  });

 

React入門--------組件API