只是另一个回复备份接受的答案:-)
React不鼓励使用 forceUpdate() 因为它们通常具有非常“这是实现它的唯一方法”的功能编程方法。在许多情况下这很好,但是许多React开发人员都带有OO背景,并且使用这种方法,听取可观察对象是完全可以的。
forceUpdate()
如果你这样做,你可能知道你必须在可观察到的“火”时重新渲染,因此,你应该使用 forceUpdate() 它实际上是一个加号 shouldComponentUpdate() 这里不涉及。
shouldComponentUpdate()
像MobX这样采用OO方法的工具实际上是在表面下实现的(实际上是MobX调用 render() 直)
render()
另一种方式是打电话 setState , 的 和 强> 保持状态:
setState
this.setState(prevState=>({...prevState}));
我发现最好避免使用forceUpdate()。强制重新渲染的一种方法是在临时外部变量上添加render()的依赖关系,并在需要时更改该变量的值。
这是一个代码示例:
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> ) } }
需要强制重新渲染时调用this.forceChange()。
forceUpdate(); 方法会起作用,但建议使用 setState();
forceUpdate();
setState();
您可以通过以下两种方式实现:
的 1.使用 forceUpdate() 方法: 强>
使用时可能会发生一些故障 forceUpdate() 方法。一个例子是它忽略了 shouldComponentUpdate() 方法并将重新呈现视图,无论是否 shouldComponentUpdate() 返回false。因此,在所有可能的情况下都应该避免使用forceUpdate()。
的 把这个状态传递给了 setState() 方法 强>
setState()
以下代码行克服了上一个示例的问题:
this.setState(this.state);
实际上,所有这一切都是用触发重新渲染的当前状态覆盖当前状态。这仍然不是最好的做事方式,但它确实克服了使用forceUpdate()方法可能遇到的一些故障。
ES6 - 我提供了一个例子,这对我有帮助:
在“短if语句”中,您可以传递空函数,如下所示:
isReady ? ()=>{} : onClick
这似乎是最短的方法。
()=>{}
为了完成您所描述的内容,请尝试this.forceUpdate()。