React组件API
ReactJS组件是顶级API。它使代码完全独立且可在应用程序中重用。它包括用于以下目的的各种方法:
创建元素
转换元素
片段
在这里，我们将解释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 lidihuo"
};
this.updateSetState = this.updateSetState.bind(this);
}
updateSetState() {
this.setState({
msg:"Its a best ReactJS tutorial"
});
}
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>Example to generate random number</h1>
<h3>Random number: {Math.random()}</h3>
<button onClick = {this.forceUpdateState}>ForceUpdate</button>
</div>
);
}
}
export default App;
输出:
每次当您单击 ForceUpdate 按钮时，它将生成随机号。可以在下图中显示。
findDOMNode()
对于DOM操作，您需要使用 ReactDOM.findDOMNode()方法。这种方法使我们能够找到或访问底层的DOM节点。
语法
ReactDOM.findDOMNode(component);
示例
对于DOM操作，首先，您需要导入以下行: react-dom 中的 import ReactDOM >"在您的 App.js 文件中。
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 Find DOM Node Example</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;
输出:
一旦您点击按钮，该节点的颜色就会更改。可以在下面的屏幕中显示。
