API компонентов ReactJS

установить состояние

setState();Этот метод используется для обновления состояния компонента. Этот метод не заменяет состояние, а только добавляет изменения к исходному состоянию.

import React from 'react';
class App extends React.Component {
　　　constructor() {
　　　　　　super();
　　　　　　this.state　=　{
　　　　　　　　　data:　[]
　　　　　　}
　　　　　　this.setStateHandler　=　this.setStateHandler.bind(this);
　　　};
　　　setStateHandler()　{
　　　　　　var　item　=　"установить…";
　　　　　　var　myArray　=　this.state.data.slice();
	　　myArray.push(item);
　　　　　　this.setState({data:　myArray});
　　　};
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<button　onClick　=　{this.setStateHandler}>УСТАНОВИТЬ　СТАТУС</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}>СИЛИТЬ　ОБНОВЛЕНИЕ</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}>Найти DOM узел</button>
　　　　　　　　　　　　<div id="myDiv">NODE</div>
　　　　　　　　　</div>
　　　　　　;
　　　}
}
export default App;

myDivПосле щелчка по кнопке цвет элемента становится зеленым.

Внимание−Сince 0.14 не рекомендуется использовать большинство старых методов API компонентов или удалять их для адаптации к ES6.