快捷導(dǎo)航

一文詳解React組件API

更新時(shí)間：2023年04月25日 11:42:28 作者：＊且聽風(fēng)吟

這篇文章主要介紹了React的組件API，及組件API的用法詳解，文中有詳細(xì)的代碼示例，對學(xué)習(xí)或工作有一定的參考價(jià)值，感興趣的同學(xué)可以閱讀本文

setState

setState(object nextState[, function callback])

參數(shù)說明

nextState：將要設(shè)置的新狀態(tài)，該狀態(tài)會和當(dāng)前的 state 合并；
callback：可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會在 setState 設(shè)置成功，且組件重新渲染后調(diào)用。

注意事項(xiàng)

不能在組件內(nèi)部通過 this.state 修改狀態(tài)，因?yàn)樵摖顟B(tài)會在調(diào)用 setState() 后被替換。
setState() 并不會立即改變 this.state，而是創(chuàng)建一個(gè)即將處理的 state。setState()并不一定是同步的，為了提升性能 React 會批量執(zhí)行 state 和 DOM 渲染。
setState() 總是會觸發(fā)一次組件重繪，除非在 shouldComponentUpdate() 中實(shí)現(xiàn)了一些條件渲染邏輯。

使用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
class Counter extends React.Component{
  constructor(props) {
      super(props);
      this.state = {count: 0};
      this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.setState((state) =>{
      return {count: state.count + 1};
    });
  }
  render () {
    return (<h2 onClick={this.handleClick}>點(diǎn)我！點(diǎn)擊次數(shù)為: {this.state.count}</h2>);
  }
}
ReactDOM.render(
  <Counter />,
  document.getElementById('example')
);
</script>

</body>
</html>

頁面效果：

注意：

上面例子中，有一句 this.handleClick = this.handleClick.bind(this)。

用 class 來創(chuàng)建 react 組件時(shí)，有一件很麻煩的事情，就是this 的指向問題。類的方法默認(rèn)是不會綁定 this 的，為了保證 this 的指向正確，需要寫這樣的代碼：

this.handleClick = this.handleClick.bind(this)

或者是這樣的代碼：

<button onClick={() => this.handleClick(e)}>

如果忘記綁定 this.handleClick 并把它傳入 onClick，調(diào)用這個(gè)函數(shù)的時(shí)候 this 的值會是 undefined。

replaceState

replaceState(object nextState[, function callback])

參數(shù)說明

nextState：將要設(shè)置的新狀態(tài)，該狀態(tài)會替換當(dāng)前的 state。
callback：可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會在 replaceState 設(shè)置成功，且組件重新渲染后調(diào)用。

replaceState() 方法與 setState() 類似，但是方法只會保留 nextState 中狀態(tài)，原state 不在 nextState 中的狀態(tài)都會被刪除。

setProps

setProps(object nextProps[, function callback])

參數(shù)說明

nextProps：將要設(shè)置的新屬性，該狀態(tài)會和當(dāng)前的 props 合并
callback：可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會在 setProps 設(shè)置成功，且組件重新渲染后調(diào)用。

設(shè)置組件屬性，并重新渲染組件。

props 相當(dāng)于組件的數(shù)據(jù)流，它總是會從父組件向下傳遞至所有的子組件中。
當(dāng)和一個(gè)外部的 JavaScript 應(yīng)用集成時(shí)，可能會需要向組件傳遞數(shù)據(jù)或通知 React.render() 組件需要重新渲染，可以使用setProps()。
更新組件，可以在節(jié)點(diǎn)上再次調(diào)用React.render()，也可以通過setProps() 方法改變組件屬性，觸發(fā)組件重新渲染。

replaceProps

replaceProps(object nextProps[, function callback])

參數(shù)說明

nextProps：將要設(shè)置的新屬性，該屬性會替換當(dāng)前的 props。
callback：可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會在 replaceProps 設(shè)置成功，且組件重新渲染后調(diào)用。

replaceProps() 方法與 setProps 類似，但它會刪除原有 props。

forceUpdate

forceUpdate([function callback])

參數(shù)說明

callback：可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會在組件render()方法調(diào)用后調(diào)用。

forceUpdate() 方法會使組件調(diào)用自身的 render() 方法重新渲染組件，組件的子組件也會調(diào)用自己的 render()。但是，組件重新渲染時(shí)，依然會讀取 this.props 和this.state，如果狀態(tài)沒有改變，那么React 只會更新 DOM。
forceUpdate()方法適用于 this.props 和 this.state 之外的組件重繪（如：修改了this.state 后），通過該方法通知 React 需要調(diào)用 render()。
一般來說，應(yīng)該盡量避免使用 forceUpdate()，而僅從 this.props 和 this.state 中讀取狀態(tài)并由 React 觸發(fā) render() 調(diào)用。

findDOMNode

DOMElement findDOMNode()

返回值：DOM 元素 DOMElement

如果組件已經(jīng)掛載到 DOM 中，該方法返回對應(yīng)的本地瀏覽器 DOM 元素。
當(dāng) render 返回 null 或 false 時(shí)，this.findDOMNode() 也會返回 null。從 DOM 中讀取值的時(shí)候，該方法很有用，如：獲取表單字段的值和做一些 DOM 操作。