React组件API用法全解 – ReactJS实战教程

上一章ReactJS实战教程请查看：React构造函数constructor用法详解

ReactJS组件component是一个顶级API，它使代码在应用程序中完全独立和可重用，它包括各种方法:

• 创建元素
• 更改元素
• 片段Fragment

在这里，我们将解释React组件API中可用的三个最重要的方法。

• setState()
• forceUpdate()
• findDOMNode()

setState()

此方法用于更新组件的状态，此方法并不总是立即替换状态，相反，它只添加对原始状态的更改。它是用于更新用户界面(UI)以响应事件处理程序和服务器响应的主要方法。

注意：在ES6类中，this.method.bind(this)用于手动绑定setState()方法。

语法

this.stateState(object newState[, function callback]);  

在上面的语法中，有一个可选的回调函数，它在setState()完成并重新呈现组件之后执行。

例子

import React, { Component } from 'react';  
import PropTypes from 'prop-types';  
class App extends React.Component {  
   constructor() {  
      super();        
      this.state = {  
          msg: "Welcome to srcmini"  
      };      
      this.updateSetState = this.updateSetState.bind(this);  
   }  
   updateSetState() {  
       this.setState({  
          msg:"ReactJS实战教程"  
       });  
   }  
   render() {  
      return (  
         <div>  
             <h1>{this.state.msg}</h1>  
             <button onClick = {this.updateSetState}>SET STATE</button>  
         </div>  
      );  
   }  
}  
export default App;  

main.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
  
ReactDOM.render(<App/>, document.getElementById('app'));  

forceUpdate ()

该方法允许我们手动更新组件。

语法

Component.forceUpdate(callback);  

例子

app.js

import React, { Component } from 'react';  
class App extends React.Component {  
   constructor() {  
      super();            
      this.forceUpdateState = this.forceUpdateState.bind(this);  
   }  
   forceUpdateState() {  
      this.forceUpdate();  
   };  
   render() {  
      return (  
         <div>  
             <h1>生成随机数的例子</h1>  
             <h3>随机数: {Math.random()}</h3>  
             <button onClick = {this.forceUpdateState}>ForceUpdate</button>  
         </div>  
      );  
   }  
}  
export default App;  

findDOMNode ()

对于DOM操作，需要使用ReactDOM.findDOMNode()方法，此方法允许我们查找或访问底层DOM节点。

语法

ReactDOM.findDOMNode(component);  

例子

对于DOM操作，首先需要导入这一行：从你的App.js文件中的’react-dom’导入ReactDOM。

app.js

import React, { Component } from 'react';  
import ReactDOM from 'react-dom';  
class App extends React.Component {  
   constructor() {  
      super();  
      this.findDomNodeHandler1 = this.findDomNodeHandler1.bind(this);  
      this.findDomNodeHandler2 = this.findDomNodeHandler2.bind(this);  
   };  
   findDomNodeHandler1() {  
       var myDiv = document.getElementById('myDivOne');  
       ReactDOM.findDOMNode(myDivOne).style.color = 'red';  
   }  
   findDomNodeHandler2() {  
       var myDiv = document.getElementById('myDivTwo');  
       ReactDOM.findDOMNode(myDivTwo).style.color = 'blue';  
   }  
   render() {  
      return (  
         <div>  
             <h1>ReactJS查找DOM节点例子</h1>  
             <button onClick = {this.findDomNodeHandler1}>FIND_DOM_NODE1</button>  
             <button onClick = {this.findDomNodeHandler2}>FIND_DOM_NODE2</button>  
             <h3 id = "myDivOne">JTP-NODE1</h3>  
             <h3 id = "myDivTwo">JTP-NODE2</h3>  
         </div>  
      );  
   }  
}  
export default App;