你可以强制React组件重新渲染而不调用setState吗？

作者: 产品你是狗
发布时间: 2024-09-01 11:41:04 (18天前)
转自：

8 条回复

0#
回复此人
咿呀哟 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 只是另一个回复备份接受的答案:-) </p> <P> React不鼓励使用 <code> forceUpdate() </code> 因为它们通常具有非常“这是实现它的唯一方法”的功能编程方法。在许多情况下这很好，但是许多React开发人员都带有OO背景，并且使用这种方法，听取可观察对象是完全可以的。 </p> <P> 如果你这样做，你可能知道你必须在可观察到的“火”时重新渲染，因此，你应该使用 <code> forceUpdate() </code> 它实际上是一个加号 <code> shouldComponentUpdate() </code> 这里不涉及。 </p> <P> 像MobX这样采用OO方法的工具实际上是在表面下实现的（实际上是MobX调用 <code> render() </code> 直） </p> </DIV>

编辑
1#
回复此人
离线请留言 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 另一种方式是打电话 <code> setState </code> ，的<strong> 和 </强> 保持状态： </p> <P> <code> this.setState(prevState=>({...prevState})); </code> </p> </DIV>

编辑
2#
回复此人
⑩Ⅵ嵗Ｄ夨憶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我发现最好避免使用forceUpdate（）。强制重新渲染的一种方法是在临时外部变量上添加render（）的依赖关系，并在需要时更改该变量的值。 </p> <P> 这是一个代码示例： </p> <pre> <code> class Example extends Component{ constructor(props){ this.state = {temp:0}; this.forceChange = this.forceChange.bind(this); } forceChange(){ this.setState(prevState => ({ temp: prevState.temp++ })); } render(){ return( <div>{this.state.temp && <div> ... add code here ... </div>} </div> ) } } </code> </pre> <P> 需要强制重新渲染时调用this.forceChange（）。 </p> </DIV>

编辑
3#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> <code> forceUpdate(); </code> 方法会起作用，但建议使用 <code> setState(); </code> </p> </DIV>

编辑
4#
回复此人
不见你 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以通过以下两种方式实现： </p> <P> 的<strong> 1.使用 <code> forceUpdate() </code> 方法： </强> </p> <P> 使用时可能会发生一些故障 <code> forceUpdate() </code> 方法。一个例子是它忽略了 <code> shouldComponentUpdate() </code> 方法并将重新呈现视图，无论是否 <code> shouldComponentUpdate() </code> 返回false。因此，在所有可能的情况下都应该避免使用forceUpdate（）。 </p> <P> 的<strong> 把这个状态传递给了 <code> setState() </code> 方法 </强> </p> <P> 以下代码行克服了上一个示例的问题： </p> <pre> <code> this.setState(this.state); </code> </pre> <P> 实际上，所有这一切都是用触发重新渲染的当前状态覆盖当前状态。这仍然不是最好的做事方式，但它确实克服了使用forceUpdate（）方法可能遇到的一些故障。 </p> </DIV>

编辑
5#
回复此人
一生浮华 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> ES6 - 我提供了一个例子，这对我有帮助： </p> <P> 在“短if语句”中，您可以传递空函数，如下所示： </p> <pre> <code> isReady ? ()=>{} : onClick </code> </pre> <P> 这似乎是最短的方法。 </p> <pre> <code> ()=>{} </code> </pre> </DIV>

编辑
6#
回复此人
NetworkAttachedStorage | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 为了完成您所描述的内容，请尝试this.forceUpdate（）。 </p> </DIV>

编辑

登录后才能参与评论