[英]How to rerender component in useEffect Hook
好的,所以:
useEffect(() => {
}, [props.lang]);
每次使用 props.lang 更改时,我应该在 useEffect 中做什么来重新渲染组件?
解决方案:
我通过改变一些问题的想法来解决这个问题(我使用另一个 function 来很好地适应语言变化。
如 React 文档中所述,将您的 useEffect 视为 componentDidMount、componentDidUpdate 和 componentWillUnmount 的混合体。
要表现得像 componentDidMount,你需要像这样设置你的 useEffect:
useEffect(() => console.log('mounted'), []);
第一个参数是一个回调,它将基于第二个参数触发,第二个参数是一个值数组。 如果第二个参数中的任何值发生变化,您在 useEffect 中定义的回调 function 将被触发。
然而,在我展示的示例中,我将一个空数组作为我的第二个参数传递,并且永远不会更改,因此当组件挂载时将调用一次回调 function。
那种总结了useEffect。 如果你有一个参数而不是一个空值,就像你的情况一样:
useEffect(() => {
}, [props.lang]);
这意味着每次“props.lang”更改时,都会调用您的回调 function。 useEffect 不会真正重新渲染您的组件,除非您在可能触发重新渲染的回调 function 中管理一些 state。
更新:
如果你想重新渲染,你的渲染 function 需要有一个 state,你正在更新你的 useEffect。
例如,在这里,渲染 function 首先显示英语作为默认语言,在我的使用效果中,我在 3 秒后更改了该语言,因此渲染被重新渲染并开始显示“西班牙语”。
function App() { const [lang, setLang] = useState("english"); useEffect(() => { setTimeout(() => { setLang("spanish"); }, 3000); }, []); return ( <div className="App"> <h1>Lang:</h1> <p>{lang}</p> </div> ); }
完整代码:
添加一个虚拟 state 您可以切换以始终启动重新渲染。
const [rerender, setRerender] = useState(false);
useEffect(()=>{
...
setRerender(!rerender);
}, []);
这将确保重新渲染,因为组件总是在 state 更改时重新渲染。
您可以随时随地调用setRerender(!rerender)
来启动重新渲染。
const [state, set] = useState(0);
useEffect(() => {
fn();
},[state])
function fn() {
setTimeout((), {
set(prev => prev + 1)
}, 3000)
}
上面的代码将每 3 秒重新渲染一次fn
function。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.