功能性子组件最佳实践

发布于 2025-01-22 15:00:58 字数 1394 浏览 5 评论 0原文

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

左耳近心 2025-01-29 15:00:58

他们是不同的事情。

  • 一个是一个可以参考JSX 的变量。它不是组成部分,例如,没有自己的生命周期。如果它可以提高您的可读性,则可以使用它。
  • 另一个是组件。但是:不建议在内声明组件 不建议使用WarningFunc)。 将其定义放在外面警告dialog原因是对帐算法。当组件在另一个组件中定义时,每次都会重新创建“构造函数”函数,并且对帐算法可能会认为每次组件类型都不同。

They are different things.

  • One is a variable which can refer to JSX. It isn't a component, e.g. doesn't have life cycle of its own. You can use it if it improves readability for you.
  • Another one is a component. But: declaring component within the function is not recommended (as you did with WarningFunc). Put its definition outside WarningDialog. Reason is reconciliation algorithm. When component is defined within another component, the "constructor" function is different each time because it is recreated, and reconciliation algorithm may think the component type is different each time.
简单气质女生网名 2025-01-29 15:00:58

无论您是用const函数声明一个反应功能组件,性能基本上都没有影响。

但是,用函数声明组件确实有利于将功能吊到当前范围的顶部。

我还建议将“子组件”放在当前组件之外,因为“子组件”确实不是一回事。

如果您想将大型组件的一部分分离以使代码更清晰,同时又不使其成为与当前组件具有州联系的子组件,则将其放在外面可以帮助您更好。

There is basically no affect in performance whether you declare a React functional component with const or function.

But declaring a component with function do have the benefit of hoisting the function to the top of current scope.

I would also suggest putting the "sub-component" outside the current component since "sub-component" is really not a thing.

If you want to detach a part of a large component to make the code clearer, while not making it a child component that have state-wise connection with the current component, put it outside helps you better.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文