React Component API

📌 相关文章

📜 React Component API

📅 最后修改于: 2020-12-19 03:56:29 🧑 作者: Mango

ReactJS组件是顶级API。它使代码完全独立且可在应用程序中重用。它包括用于以下方面的各种方法：

创建元素
转换元素
碎片

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

setState()
强制性升级()
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 JavaTpoint"
      };    
      this.updateSetState = this.updateSetState.bind(this);
   }
   updateSetState() {
       this.setState({
          msg:"Its a best ReactJS tutorial"
       });
   }
   render() {
      return (
         
             {this.state.msg}
             
         
      );
   }
}
export default App;

Main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(, document.getElementById('app'));

输出：

单击“设置状态”按钮时，将显示以下屏幕，其中包含更新的消息。

强制性升级()

这种方法使我们可以手动更新组件。

句法

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 (
         
             Example to generate random number
             Random number: {Math.random()}
             
         
      );
   }
}
export default App;

输出：

每次单击ForceUpdate按钮时，它将生成随机数。可以在下图中显示。

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 (
         
             ReactJS Find DOM Node Example
             
             
             JTP-NODE1
             JTP-NODE2
         
      );
   }
}
export default App;

输出：

单击按钮后，节点的颜色将更改。可以在下面的屏幕中显示。