React でページを更新する

1. React のページを手動で reload() メソッドを使用して更新する
2. React でページを更新するためにコンポーネントの状態を更新する

React の重要な利点の 1つは、最新の更新を表示するためにページを更新する必要がないことです。React は、状態が変化するたびにビューを自動的に更新します。

それでも、ページを手動で更新する必要がある場合があります。たとえば、単純なリロードで状態の不整合を修正できます。

また、不要なアクションを元に戻したい場合もあります。理由が何であれ、React でページを手動で更新する方法を見てみましょう。

React のページを手動で reload() メソッドを使用して更新する

ほとんどの場合、ユーザーがボタン、テキスト、またはその他の要素をクリックした後、React で手動更新をトリガーする必要があります。そのためには、イベントハンドラーを作成する必要があります。ブラウザは、reload() メソッドを含む location オブジェクトを備えた window インターフェースをネイティブに提供します。

以下の例でわかるように、これはかなり単純な方法です。ブラウザがサーバーからページのコンテンツを完全にリロードするか、キャッシュだけをリロードするかを指定するために使用される引数は 1つだけです。

ページを正常にリロードするには、イベントハンドラー内でこのメソッドを使用する必要があります。例を見てみましょう：

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 でページの更新（再レンダリングとも呼ばれる）を自動的にトリガーする方法の非常に単純なデモンストレーションです。1つの textInput プロパティで状態を開始し、input フィールドの値が変更されるたびにプロパティを更新します。