ReactJS コンポーネントAPI

设置状态

setState()方法用于更新组件的状态。此方法不会替换状态，而只会添加对原始状态的更改。

import React from 'react';
class App extends React.Component {
　　　constructor() {
　　　　　　super();
　　　　　　this.state　=　{
　　　　　　　　　data:　[]
　　　　　　}
　　　　　　this.setStateHandler　=　this.setStateHandler.bind(this);
　　　};
　　　setStateHandler()　{
　　　　　　var　item　=　"setState..."
　　　　　　var　myArray　=　this.state.data.slice();
	　　myArray.push(item);
　　　　　　this.setState({data:　myArray})
　　　};
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<button　onClick　=　{this.setStateHandler}>SET　STATE</button>
　　　　　　　　　　　　<h4>State　Array:　{this.state.data}</h4>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export default App;

我们从一个空数组开始。每次单击按钮，状态都会更新。如果单击五次，将得到以下输出。

强制更新

有时我们可能想手动更新组件。这可以使用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>ランダムな数値:　{Math.random()}</h4>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export default App;

ボタンをクリックするたびに、ランダムな数字を設定しています。

DOMノードの検索

DOM操作には、このメソッドを使用できます。まず、インポートする必要があります。ReactDOM.findDOMNode()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;

myDivボタンをクリックすると、要素の色が緑色に変わります。

注意−0.14更新以来、多くの古いコンポーネントAPIメソッドの使用は推奨されていません。ESに適応するために削除することも検討してください。6。