如何从所有组件的组件调用函数DidMount

Question

我正在建立一个基于 ReactJS 的网站。如果它有所作为，我正在使用钩子。

我正在为防伪令牌等编写一些安全代码。我想自动调用一个函数，而无需逐页实现它。

如何从所有组件的组件DidMount调用函数？有没有全球性的活动？

现在这样做;但是遵循所有并实现这一点真的很复杂......

componentDidMount() {
token.Get();
}

Answer 1

如果您使用的是 Hooks，那么您使用的是函数组件，因此无法访问像componentDidMount这样的生命周期方法。要触发装载和卸载的效果，您必须执行以下操作：

React.useEffect(() => token.Get(), [])

(https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects(

要定义您似乎想要的全局行为，您可以在根App.js级别实现该行为。您还可以创建一个更高阶的组件来包装需要此行为的每个组件，但对于一行代码来说似乎有些矫枉过正(https://reactjs.org/docs/higher-order-components.html(

Answer 2

如果要自动向所有请求添加令牌，可以使用如下所示的axios轻松实现：

axios.defaults.headers.common['Authorization'] = YOUR_TOKEN;

有关详细信息，请参阅 axios 文档。