コンポーネントを React でリフレッシュする方法を教えてください。

1年 ago
蓮, 翼
1 minute

Reactでは、コンポーネントを再描画するためのいくつかの一般的な方法があります。

  1. forceUpdate()
  2. forceUpdate()
  3. コンポーネント
class MyComponent extends React.Component {
  handleClick() {
    // 手动调用 forceUpdate() 方法刷新组件
    this.forceUpdate();
  }

  render() {
    // ...
  }
}
  1. setState()を実行する
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  handleClick() {
    // 修改 state 的值，并触发组件的重新渲染
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    // ...
  }
}
  1. ReactDOM.render()を実行する
  2. ReactDOM.render()
class MyComponent extends React.Component {
  handleClick() {
    // 重新渲染整个组件树
    ReactDOM.render(<MyComponent />, document.getElementById('root'));
  }

  render() {
    // ...
  }
}

コンポーネントをリフレッシュするために forceUpdate() メソッドを直接使用することは避けるべきことに注意してください。代わりに、state の変更や親コンポーネントからの props の受け渡しによりコンポーネントのレンダリングの再トリガーを優先的に検討してください。これにより、React コードの一貫性と保守性をより適切に保つことができます。

bannerAds