javascript - 如何在不使用任何事件处理程序的情况下重新加载 react 组件？

Question

是否可以在react中重新加载组件，而无需使用onClick等函数的帮助。我希望我的组件在刚刚加载后再次重新加载。

我尝试使用window.location.reload(false); 在构造函数中。我什至尝试使用 useEffect() 但它们会使页面无限重新加载。

有什么解决办法吗？

Answer 1

我见过人们通过设置严格用于触发刷新的虚拟 setState 方法来实现此目的。考虑这个组件:

export const Proof = () => {
    console.log("Component re-rendered")
    const [dummyState,rerender] = React.useState(1);

    const onClick = () => {
        rerender(dummyState + 1);
    }

    React.useEffect( () => {
        console.log("dummyState's state has updated to: " + dummyState)
    }, [dummyState])
    return(
        <div>
            <button onClick={onClick}>reRender</button>
        </div>
    )
}

每当您想要重新渲染组件时，您只需要触发 dummyState 中的更改即可。单击按钮将导致组件状态发生变化，这将导致组件重新渲染(我使用 console.log() 进行证明)。值得注意的是，简单地调用立即改变组件状态的方法将导致无限循环。

从上面的评论来看，听起来您正在将一个值作为 Prop 传递给子组件，并且您希望在与该组件发生任何交互时立即重新计算该值。理想情况下，交互本身应该导致重新计算。但是，如果您只想快速重新计算值并在渲染后立即重新渲染组件，那么我认为这会起作用:

export const Proof = () => {
    console.log("Component re-rendered")
    const [dummyState,rerender] = React.useState(1);

    //the empty brackets will cause this useEffect 
    //statement to only execute once.
    React.useEffect( () => {
        rerender(dummyState + 1);
    }, []) 

    return(
        <div>
            <p>dummyState</p>
        </div>
    )
}

您还可以重新计算 useEffect 方法中的值，因为它将在组件最初渲染时立即调用，但不会在任何后续重新渲染时调用(因为空括号作为 useEffect 方法的第二个参数)