如何在 reactjs 中重新加载组件（页面的一部分）？答案

【问题标题】：How to reload a component (part of page) in reactjs?如何在 reactjs 中重新加载组件（页面的一部分）？
【发布时间】：2019-11-01 02:19:47
【问题描述】：

我正在研究 React 项目。当我们单击重新加载按钮时，我试图重新加载组件。我实现了 onClick 函数，如下所示。但它正在重新加载整个窗口。我只想重新加载那个类组件，而不是整个窗口。谁能帮我解决这个问题？

refreshPage() {
    window.location.reload();
  }

【问题讨论】：

您应该更改状态以重新渲染某些内容。
@MuratKaragöz 你能举个例子吗？
reactjs.org/docs/state-and-lifecycle.html
您是否也想为某些嵌套组件调用componentDidMount？如果你这样做了，我只看到可能的解决方案来改变你想要“更新”的最顶层元素的 key 属性
为什么需要重新加载？通常，如果需要在视觉上更新组件，则道具和/或状态无论如何都应该改变。您能否详细说明您要完成的工作？

标签： reactjs

【解决方案1】：

refreshPage() {
  window.location.reload(false);
}

参考这里：https://upmostly.com/tutorials/how-to-refresh-a-page-or-component-in-react

【讨论】：

【解决方案2】：

您可以查看其他线程：Can you force a React component to rerender without calling setState?

这是最佳答案：

在类组件中，你可以调用this.forceUpdate()来强制一个重新渲染。

文档： https://facebook.github.io/react/docs/component-api.html

在函数组件中，没有 forceUpdate 的等价物，但是 you can contrive a way to force updates with the useState hook.

【讨论】：

【解决方案3】：

使用 React Hook：

useEffect(()=> {
    fetchData();
}, [data]);
// page will reload whenever data is updated.

【讨论】：

【解决方案4】：

您可以创建一个新函数。您可以在 componentDidMount 和 refreshPage 上调用它。

exampleFunction = () => {
   /** Do your job here */
}

componentDidMount(){
   /** your code */
   this.exampleFunction ();
   /** your code */
}

refreshPage(){
   this.exampleFunction ();
}

【讨论】：

this.forceUpdate() 不会产生任何结果
想要强调：不会调用componentDidUpdate、componentDidMount或构造函数的代码。只是重新渲染。
这个方法跳过了shouldComponentUpdate()，你可以在这里阅读更多关于reactjs.org/docs/react-component.html#forceupdate
@skyboyer 我也想调用 componentDidmount。那么 forceUpdate() 可能不起作用
@Gauranga，我认为您想在单击刷新按钮时再次获取数据。对吗？

【解决方案5】：

最可维护的方式是对现有组件进行反应，以一致的方式处理“重新加载”。理想情况下，组件应该通过 props/context/redux 获取数据，而不是自己加载。这样，您可以通过单个调用刷新所有内容。假设它可能是带有“REFRESH_HOTELS”之类的操作的 redux 或使用方法 reload 的单独上下文。

作为最后的手段，您可以更新key prop（为任何其他值，可能只是随机字符串）并且整个分支将被重新创建，包括对componentDidMount 的调用。它被称为“通过关键道具重置状态”技术。但这既不是性能安全的，也不是真正灵活的方式。最好避免这种情况，直到您真的不关心可维护性（或用作临时解决方案......但通常只要应用存在，“临时解决方案”就会保留）

【讨论】：

【解决方案6】：

window.location.reload();会重新加载当前文档，就像浏览器中的刷新按钮一样，不会像 AJAX 那样进行任何局部重新渲染。通过 make setState in react 来实现这一点。

工作样本下方：

import React from "react";

class RefreshComponent extends React.Component {
 constructor(props) {
   super(props);
   this.state = { name: "React Component reload sample" };
}
 submit() {
   this.setState({ name: "React Component Updated - " + new Date() });
}
render() {
  return (
    <div>
      {this.state.name}
      <br />
      <button
       onClick={() => {
         this.submit();
       }}
     >
       Submit
     </button>
    </div>
  );
 }
}

export default RefreshComponent;

【讨论】：

【解决方案7】：

如果你想渲染你的组件，那么你可以在你的函数中使用 this.setState({}) 更新任何状态。

【讨论】：

它会在重新加载时调用 componentDidMount。我希望这发生吗？
我认为它会调用componentDidMount，因为componentDidMount在渲染之后调用。
没有。它不会调用 componentDidMount，因为组件已经挂载。它将调用 componentDidUpdate。

【解决方案8】：

您可以通过更新状态来触发组件的重新加载。

class YourComponent extends Component {
  state = {
    reload: false
  };

  refreshPage = () => {
    this.setState(
      {reload: true},
      () => this.setState({reload: false})
    )
  }
}

这很脏，但它可能会起作用。不过我还没有测试过。

【讨论】：

它将如何重新加载以及如何跟踪状态变量？
render() 中发生的任何事情都会重新运行。它Reacts 状态变化。
它会再次调用componentDidMount吗？
不应该，不。如果您需要这样做，可能是您使用了错误的生命周期事件。