我有一个功能组件,我想强迫它重新渲染。
我该怎么办? 由于没有实例this,因此我无法致电this.forceUpdate()。
this
this.forceUpdate()
现在,使用react挂钩,您可以调用useState()函数组件。
useState()
useState()将返回由2个元素组成的数组: 1.一个值,表示当前状态。 2.它的二传手。用它来更新值。
通过设置器更新值将迫使您的功能组件重新呈现 , 就像这样forceUpdate做:
forceUpdate
import React, { useState } from 'react'; //create your forceUpdate hook function useForceUpdate(){ const [value, setValue] = useState(0); // integer state return () => setValue(value => ++value); // update the state to force render } function MyComponent() { // call your hook here const forceUpdate = useForceUpdate(); return ( <div> {/*Clicking on the button will force to re-render like force update does */} <button onClick={forceUpdate}> Click to re-render </button> </div> ); }
您可以在此处找到演示。
上面的组件使用了自定义的钩子函数(useForceUpdate),该函数使用了布尔状态钩子(useState)。它切换布尔状态,从而告诉React重新运行render函数。
useForceUpdate
useState
在此答案的旧版本中,代码段使用布尔值,并将其切换为forceUpdate()。现在,我已经编辑了答案,该代码段使用数字而不是布尔值。
forceUpdate()
为什么呢 (你会问我)
因为发生在我身上的forceUpdate()是,后来又从2个不同的事件中两次调用了my ,因此将布尔值重置为其原始状态,并且组件从未呈现。
因为在useState的setter(setValue此处)中,React将之前的状态与新的状态进行比较, 并且仅在状态不同时才进行渲染。
setValue
React