在本章中,我们将解释React组件API.我们将讨论三种方法: setState(),forceUpdate 和 ReactDOM.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 (); }}export default App;State Array: {this.state.data}
我们从一个空数组开始.每次我们点击按钮,状态都会更新.如果我们点击五次,我们将获得以下输出.
强制更新
有时我们可能希望手动更新组件.这可以使用 forceUpdate()方法来实现.
import React from 'react';class App extends React.Component { constructor() { super(); this.forceUpdateHandler = this.forceUpdateHandler.bind(this); }; forceUpdateHandler() { this.forceUpdate(); }; render() { return (); }}export default App;Random number: {Math.random()}
我们设置的是一个随机数,每次点击按钮都会更新.
Find Dom Node
对于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 (); }}export default App;NODE
点击按钮后, myDiv 元素的颜色会变为绿色.
注意 : 自0.14更新以来,不推荐使用或删除大多数旧组件API方法以适应ES6.