ReactJS 基础教程

Ciclo de Vida de Componentes do ReactJS Validação de Hooks do ReactJS

API de Componentes do ReactJS

在本章中，我们将解释React组件API。我们将讨论三种方法:setState()， forceUpdate和react . finddomnode()。在新的ES6类中，我们必须手动绑定它。我们将在示例中使用this.method.bind(this)。

设置状态

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>Número Aleatório: {Math.random()}</h4>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export default App;

Estamos configurando um número aleatório que será atualizado a cada clique no botão.

Localizar Nó DOM

Para operações de DOM, podemos usar métodos. Primeiro, precisamos importar.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}>ENCONTRAR NÓ DOM</button>
　　　　　　　　　　　　<div id="myDiv">NODE</div>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export default App;

myDivApós clicar no botão, a cor do elemento torna-se verde.

Atenção−desde 0.14Desde a atualização, não é recomendado usar a maioria dos métodos API de componentes antigos ou removê-los para se adequar ao ES6.

Ciclo de Vida de Componentes do ReactJS Validação de Hooks do ReactJS