腾讯|Web前端:2022年每个开发人员都必须遵循的React最佳实践( 二 )


除此之外 , 这些组件的抽象程度较低 。 React 钩子的引入已经成为开发人员的福音 , 因为他们不再需要编写类 。 包括 useState、useEffect 和 use context 可以帮助你实现目标 。

8、以函数命名组件
命名组件被认为是最佳反应实践 , 它应该具有立即传达组件功能的潜力 。 根据对代码的需要来命名组件会使你在将来感到困惑 。 命名一个在任何地方都可以使用的组件 Avatar 。 它将对作者、用户或评论非常有利 。 所以 , AuthorAvatar 也可以在其使用的上下文中使用 。 但是 , 在这种情况下 , 问题在于它会限制该组件的效用 。 在函数之后命名组件将对社区有用 。
9、使用大写的组件名称
使用 JSX(一种 JavaScript 扩展)意味着组件的名称需要以大写字母开头 。 举个例子 。 你可以选择将组件命名为 SelectButton 而不是选择按钮 。 这是必不可少的 , 因为它为 JSX 提供了一条简单的路径 , 以区别于默认的 HTML 标记来识别它们 。
早期的 React 版本曾经有一个所有内置名称的列表 , 以将它们与自定义名称区分开来 。 然而 , 在这种情况下 , 限制是它需要不断更新 。 如果你发现 JSX 不是你的语言 , 你可以使用小写字母 。 但问题仍然存在 。 它在组件的可重用性方面带来了很多困难 。
10、保持状态业务逻辑与UI分离将状态管理逻辑从UI逻辑中分离出来 , UI逻辑可以在多个方面为你提供帮助 。 两者都做的组件没有影响力 , 因为它们使它们更难重用 , 更难测试 , 更难重构 , 尤其是当你在寻找状态管理的时候 。 最好的方法是将状态提取到它自己的钩子中 , 而不是为状态在组件中的位置编写逻辑 。
总结
大规模构建React应用程序似乎是一项复杂的任务 , 需要你为web开发人员考虑最佳决策 。 React中的最佳实践是与用户和你的团队相关联的 。