React教程10: 组件Component API

 

这个教程讲述 React component API的使用，其中包括3个方法： setState(), forceUpdate 和 ReactDOM.findDOMNode(). 在新的 ES6 类里面，我们手动绑定 this。你可以在下面例子中看到我们使用 this.method.bind(this)。

Set State

setState() 方法是用来更新组件的state状态的。这个方法不会替换state，但是会在原有state上面添加新的更新内容。

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;
      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;

我们从一个空的数列开始，当每一次我们点击按钮后，state就会更新。

点击5次后，会得到如下显示效果。

Force Update

当你需要手动更新component时候，请使用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;

我们这个例子设置了当按钮被点击后，产生的随机的数字。

Find Dom Node

对于 DOM 的操作，我们使用 ReactDOM.findDOMNode() 方法。首先我们需要import react-dom。

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
   constructor() {
      super();
      this.getDomNodeHandler = 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更新到 0.14 版本后，为了适应ES6标准，许多旧的 API 方法deprecated被删除或者降级了。