亚洲区国产区激情区无码区,国产成人mv视频在线观看,国产A毛片AAAAAA,亚洲精品国产首次亮相在线

ReactJS 組件API

在本章中，我們將解釋React組件API。我們將討論三種方法:setState()， forceUpdate和react . finddomnode()。在新的ES6類中，我們必須手動(dòng)綁定它。我們將在示例中使用this.method.bind(this)。

設(shè)置狀態(tài)

setState()方法用于更新組件的狀態(tài)。此方法不會(huì)替換狀態(tài)，而只會(huì)添加對(duì)原始狀態(tài)的更改。

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;

我們從一個(gè)空數(shù)組開(kāi)始。每次單擊按鈕，狀態(tài)都會(huì)更新。如果單擊五次，將得到以下輸出。

反應(yīng)組件API設(shè)置狀態(tài)

強(qiáng)制更新

有時(shí)我們可能想手動(dòng)更新組件。這可以使用forceUpdate()方法來(lái)實(shí)現(xiàn)。

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;

我們正在設(shè)置一個(gè)隨機(jī)數(shù)字，該數(shù)字將在每次單擊按鈕時(shí)更新。

React Component API強(qiáng)制更新

查找Dom節(jié)點(diǎn)

對(duì)于DOM操作，我們可以使用方法。首先，我們需要導(dǎo)入。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}>FIND DOME NODE</button>
            <div id = "myDiv">NODE</div>
         </div>
      );
   }
}
export default App;

myDiv單擊按鈕后，元素的顏色變?yōu)榫G色。

React Component API查找Dom節(jié)點(diǎn)

注意?自從0.14更新以來(lái)，不推薦使用大多數(shù)舊的組件API方法或?qū)⑵鋭h除以適應(yīng)ES6。