在使用影响路由器之前响应 appjs 触发

Question

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

首先，我可以做些什么才能在应用程序JS中使用效果触发器

应用文件

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将为假。App将在第一次渲染后发出警报。我们会将canAlert=false传递给Routers组件，因此它不会在第一次渲染时发出警报。

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

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