ReactJS组件API


在本章中,我们将解释React组件API。我们将讨论三种方法: setState(),forceUpdateReactDOM.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;

我们从一个空阵列开始。每次我们点击按钮,状态都会被更新。如果我们点击五次,我们会得到以下输出。

React组件API设置状态

强制性升级

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

我们正在设置一个随机数字,每次单击该按钮时都会更新。

React组件API强制更新

查找Dom节点

对于DOM操作,我们可以使用 ReactDOM.findDOMNode() 方法。首先我们需要导入 反应

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 元素的颜色将 变为 绿色。

React组件API查找Dom节点

- 自0.14更新以来,大多数较旧的组件API方法都被弃用或删除以适应ES6。