强制React组件重新渲染

左手的ㄟ右手 2023-02-21 14:28 25阅读 0赞

The beauty of React components is that they automagically render and update based on a change in `state` or `props`; simply update the state from any place and suddenly your UI element updates -- awesome!  There may be a case, however, where you simply want to brute force a fresh render of a React component.

React组件的优点是它们根据`state`或`props`的变化自动渲染和更新; 只需从任何地方更新状态，然后您的UI元素就会突然更新-太棒了！ 但是，在某些情况下，您可能只想蛮力地对React组件进行新的渲染。

*Note:  In most cases you should never force a React component to re-render; re-rendering should always be done based on state or props changes.  Nonetheless, I don't judge and there may be a case where you legitimately need to force a React component to re-render so let's have it!*

*注意：在大多数情况下，您永远不要强迫React组件重新渲染。* *重新渲染应始终根据状态或道具更改进行。* *但是，我没有判断，在某些情况下，您可能确实需要强制React组件重新渲染，所以让我们拥有它！*

## 强制React组件渲染 **(**Force React Component Render**)** ##

There are multiple ways to force a React component render but they are essentially the same.  The first is using `this.forceUpdate()`, which skips `shouldComponentUpdate`:

强制React组件渲染的方法有多种，但本质上是相同的。 第一种是使用`this.forceUpdate()` ，它会跳过`shouldComponentUpdate` ：

someMethod() {
        // Force a render without state change...
        this.forceUpdate();
    }

Assuming your component has a `state`, you could also call the following:

假设您的组件处于`state` ，您还可以调用以下命令：

someMethod() {
        // Force a render with a simulated state change
        this.setState({ state: this.state });
    }

This blog doesn't aim to be prescriptive, so I wont scold developers for using this brute force method.  Again, there's likely a better, more "React-y" way to render a component properly, but if you are desperate to get a component render on command, there are many ways to do so with React.

这个博客的目的不是要说明性的，所以我不会责骂使用这种蛮力方法的开发人员。 同样，可能存在更好的，更“ React-y”的方法来正确地渲染组件，但是如果您迫切希望通过命令来渲染组件，则有许多方法可以使用React来实现。

> 翻译自: [https://davidwalsh.name/react-force-render][https_davidwalsh.name_react-force-render]

[https_davidwalsh.name_react-force-render]: https://davidwalsh.name/react-force-render