说说React的事（六）组件常用API

在日常的React开发中，我们常用的组件API有以下这些

• setState：状态更新，组件渲染，这个方法并不是重新替换原来的State，而只是更新原来的State。
• forceUpdate：强制更新组件。
• findDOMNode：手动查找dom组件。

首先setState在说说React的事（四）State和Props中已经做了说明，这里就不再赘述。

forceUpdate

当我们想刷新组件的时候，这时候就可以使用forceUpdate了，例如如下🌰，当我们点击按钮的时候组件将会刷新：

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
   };

   forceUpdateHandler() {
      this.forceUpdate();
   };

   render() {
      return (
         <div>
            <button onClick = {this.forceUpdateHandler}>FORCE UPDATE</button>
            <h4>Random number: {Math.random()}</h4>
         </div>
      );
   }
}

export default App;

findDOMNode

对于DOM的操作，我们可以使用ReactDOM.findDOMNode()方法，但在使用之前必须import react-dom库。

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
   constructor() {
      super();
      this.findDomNodeHandler = this.findDomNodeHandler.bind(this);
   };

   findDomNodeHandler() {
      var myDiv = document.getElementById('myDiv');
      ReactDOM.findDOMNode(myDiv).style.color = 'green';
   }
	
   render() {
      return (
         <div>
            <button onClick = {this.findDomNodeHandler}>FIND DOME NODE</button>
            <div id = "myDiv">NODE</div>
         </div>
      );
   }
}

export default App;