在使用效果路由器之前触发react appjs

Question

我有一个问题，我如何在路由器之前触发我的appjs文件中的useeffect方法

首先，怎样才能在app js中使用效果触发器？

Appjs文件

import GlobalContext from "./context/globalContext";
import Routers from "./router/index"
function App() {
    const {initAuth} = useContext(GlobalContext)
    alert("appjs")
    useEffect(() => {
        alert("appJS Use Effect")
        initAuth()
    }, [])
    return (
        <React.Fragment>
                <Routers/>
        </React.Fragment>
    );
}
export default App;

我的路由器

export default function Routers() {
    alert("RoutersJS")
    useEffect(()=>{
        alert("useEffect RouterJS")
    },[])
    return (
        <Router>
             ....
       </Router>

    )
}

Answer 1

Yousaf是正确的，你不能直接这样做，也不能改变渲染的顺序。如果有一个副作用，绝对必须在两个元素之间正确排序，你可以创建一个道具到路由器，告诉它什么时候允许它产生副作用。

这引入了这些元素之间的大量耦合，除非您绝对需要这两个元素产生必须排序的副作用，否则我不建议这样做。

function App() {
    ...
    const [hasAlerted, setHasAlerted] = useState(false);
    useEffect(() => {
        alert("appJS Use Effect");
        initAuth();
        setHasAlerted(true);
    }, [])
    return (
        <React.Fragment>
                <Routers canAlert={hasAlerted} />
        </React.Fragment>
    );
}


export default function Routers({canAlert})) {
    useEffect(()=>{
        if (canAlert) {
            alert("useEffect RouterJS")
        }
    },[canAlert])
    return (
        <Router>
             ....
       </Router>

    )
}

快速解释

在第一次渲染时，hasAlerted将为false。App将在第一次渲染后发出警报。我们将把canAlert=false传递给Routers组件，这样它就不会在第一次呈现时发出警报。

因为我们setHasAlerted(true)树将再次渲染。在第二次渲染时，hasAlerted将为true。App不会发出警报，因为它的useEffect依赖项没有更改。我们将把canAlert=true传递给Routers组件，这样它就会在第二次呈现时发出警报。

同样，如果您有能力的话，我可能会探索其他解决方案。