一文詳解React組件API

更新時間：2023年04月25日 11:42:28 作者：＊且聽風吟

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

setState

setState(object nextState[, function callback])

參數說明

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

注意事項

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

使用

<!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}>點我！點擊次數為: {this.state.count}</h2>);
  }
}
ReactDOM.render(
  <Counter />,
  document.getElementById('example')
);
</script>

</body>
</html>

頁面效果：

注意：

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

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

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

或者是這樣的代碼：

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

如果忘記綁定 this.handleClick 并把它傳入 onClick，調用這個函數的時候 this 的值會是 undefined。

replaceState

replaceState(object nextState[, function callback])

參數說明

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

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

setProps

setProps(object nextProps[, function callback])

參數說明

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

設置組件屬性，并重新渲染組件。

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

replaceProps

replaceProps(object nextProps[, function callback])

參數說明

nextProps：將要設置的新屬性，該屬性會替換當前的 props。
callback：可選參數，回調函數。該函數會在 replaceProps 設置成功，且組件重新渲染后調用。

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

forceUpdate

forceUpdate([function callback])

參數說明

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

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