过度使用 useTranslation() 钩子
我正在使用 next-i18next 来翻译我的 Next.js 页面。我想知道是否使用 每个 React 组件的任何地方的 const { t } = useTranslation('common') 都会对性能产生负面影响。另一种方法是在父级中调用它并将其传递给子级，这在我看来不是一个聪明的解决方案，因为它为每个组件添加了一个额外的道具。
I'm using next-i18next to translate my Next.js pages. I'm wondering if usingconst { t } = useTranslation('common') everywhere for each react component would have a negative impact on performance. The alternative would be calling it in the parent and passing it down to the children which IMO is not a smart solution since it add an extra prop to each component.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这是做到这一点的方法。
正如您所描述的，将函数本身作为 prop 传递的替代方案本质上是一样的。它只是指向原始函数的引用。
但是，将其作为 prop 传递可能会增加更多的内部反应开销，因为渲染过程需要在它传递的每个组件上查明该 prop 是否发生变化。
使用从钩子解构的 t() ，您只需调用对该函数的引用，仅此而已。
It is the way to do it.
The alternative as you describe it, passing the function itself as a prop, is essentially the same thing. It would just point to a reference of the original function.
But, passing it as a prop would likely add more overhead to react internally as the rendering process would need to find out if that prop changed, on every component it passes through.
Using
t()as destructured from a hook, you would just call a reference to the function, nothing more.