在 React 中重新整理頁面

1. 使用 reload() 方法手動重新整理 React 中的頁面
2. 在 React 中更新元件的狀態以重新整理頁面

React 的顯著優勢之一是你無需重新整理頁面即可檢視最新更新。每當狀態發生變化時，React 都會自動更新檢視。

儘管如此，有時還是需要手動重新整理頁面。例如，簡單的重新載入可以修復狀態中的不一致。

其他時候，你可能想要撤消一些不必要的操作。讓我們看看如何在 React 中手動重新整理頁面，不管是什麼原因。

使用 reload() 方法手動重新整理 React 中的頁面

大多數時候，我們希望在使用者單擊按鈕、文字或其他一些元素後觸發 React 中的手動重新整理。為此，我們需要建立一個事件處理程式。瀏覽器本機提供帶有 location 物件的 window 介面，包括 reload() 方法。

這是一個相當簡單的方法，你可以在下面的示例中看到。它只需要一個引數，用於指定瀏覽器是應該從伺服器完全重新載入頁面內容還是隻從快取中重新載入。

我們需要在我們的事件處理程式中使用這個方法來成功地重新載入一個頁面。讓我們看一個例子：

class App extends Component {
  render() {
    return <button onClick={() => window.location.reload()}>Refresh</button>;
  }
}

這是在 React 中手動重新整理頁面的基本示例。請記住，onClick 事件處理程式應設定為等於函式定義，而不是呼叫。這樣，它僅在使用者單擊按鈕時執行。你可以自己試驗 playcode 上的程式碼。

或者，你可以使用生命週期方法在安裝後重新載入頁面。功能元件沒有生命週期方法，但你可以使用 useEffect() 掛鉤來完成相同的結果。

在 React 中更新元件的狀態以重新整理頁面

對元件本地狀態的更改會自動觸發更新。這是在 React 中處理頁面更新的自然方式，因此它更符合 React 建立者的官方良好實踐指南。

如果構建得當，React 應用程式不需要手動重新整理來載入狀態的最新更改。這個過程是自動觸發的。

擁有本地狀態的全部目的是自動反映對狀態的任何更改。讓我們看一個例子：

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      textInput: ""
    }
  }
  render() {
    return <div>
            <input type="text" onChange={(e) => this.setState({textInput: e.target.value})} />
            <h1>{this.state.textInput}</h1> 
           </div>
  }
}

這是一個相當簡單的演示，展示了狀態變化如何在 React 中自動觸發頁面重新整理（也稱為重新渲染）。我們使用一個 textInput 屬性啟動狀態，並在每次 input 欄位中的值更改時更新該屬性。