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>상태 배열:　{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。