在 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 字段中的值更改时更新该属性。