摘要:幸运的是,组合易于理解。组件的组合是自然而然的。高效用户界面可组合的层次结构,因此,组件的组合是一种构建用户界面的有效的方式。这个原则建议避免重复。只有一个组件符合单一责任原则并且具有合理的封装时,它是可复用的。
</>复制代码
翻译:刘小夕原文链接:https://dmitripavlutin.com/7-...
原文的篇幅非常长,不过内容太过于吸引我,还是忍不住要翻译出来。此篇文章对编写可重用和可维护的React组件非常有帮助。但因为篇幅实在太长,我对文章进行了分割,本篇文章重点阐述 组合和复用。因水平有限,文中部分翻译可能不够准确,如果你有更好的想法,欢迎在评论区指出。
更多文章可戳: https://github.com/YvetteLau/...
———————————————我是一条分割线————————————————
组合</>复制代码
一个组合式组件是由更小的特定组件组合而成的。
组合(composition)是一种通过将各组件联合在一起以创建更大组件的方式。组合是 React 的核心。
幸运的是,组合易于理解。把一组小的片段,联合起来,创建一个更大个儿。
让我们来看一个常见的前端应用组合模式。应用由头部的 header、底部的 footer、左侧的 sidebar,还有中部的有效内容联合而成:
</>复制代码
</>复制代码
function Application({ children }) {
return (
{children}
);
}
function Header() {
return (
)
}
function Footer() {
return (
)
}
function Sidebar({ children }) {
return (
{children}
);
}
function Content({ children }) {
return (
{children}
)
}
function Menu() {
return (
);
}
function Article() {
return (
);
}
function Label({ children }) {
return <{children}>
}
const app = (
);
ReactDOM.render(app, document.getElementById("root"));
应用程序演示了组合如何构建应用程序。这种组织这样组织代码即富于表现力又便于理解。
React 组件的组合是自然而然的。这个库使用了一个声明范式,从而不会抑制组合式的表现力。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/106659.html
摘要:单元测试不仅涉及早期错误检测。当组件的架构设计很脆弱时,就会变得难以测试,而当组件难以测试的时候,你大概念会跳过编写单元测试的过程,最终的结果就是组件未测试。可测试性是确定组件结构良好程度的实用标准。可复用的组件是精心设计的系统的结果。 翻译:刘小夕原文链接:https://dmitripavlutin.com/7-... 本篇文章重点阐述可测试和富有意义。因水平有限,文中部分翻译可...
摘要:编写组件时要考虑的基本准则是单一职责原则。这些更改通常要求组件在隔离状态下易于修改这也是的目标。解决多重责任问题需要将分割为两个组件和。组件之间的通信是通过实现。更改的唯一原因是修改表单字段。 翻译:刘小夕原文链接:https://dmitripavlutin.com/7-... 原文的篇幅非常长,不过内容太过于吸引我,还是忍不住要翻译出来。此篇文章对编写可重用和可维护的React组...
摘要:组件可以处理其他组件的实例化为了避免破坏封装,请注意通过传递的内容。因此,将状态管理的父组件实例传递给子组件会破坏封装。让我们改进两个组件的结构和属性,以便恢复封装。组件的可重用性和可测试性显著增加。 翻译:刘小夕原文链接:https://dmitripavlutin.com/7-... 原文的篇幅非常长,不过内容太过于吸引我,还是忍不住要翻译出来。此篇文章对编写可重用和可维护的Re...
摘要:函数式编程与面向对象编程编程的本质之剑目录编程的本质读到两篇文章写的不错综合摘录一下复合是编程的本质函数式程序员在洞察问题方面会遵循一个奇特的路线。在面向对象编程中,类或接口的声明就是表面。 函数式编程与面向对象编程[5]:编程的本质 之剑 2016.5.6 01:26:31 编程的本质 读到两篇文章,写的不错, 综合摘录一下 复合是编程的本质 函数式程序员在洞察问题方面会遵循...
摘要:删除不必要的代码。而简化前的代码包含的语法要素对于传达代码意义本身作用并不大。删除不必要的代码有时候,我们试图为不必要的事物命名。例如,大多数情况下,你应该省略仅仅用来当做返回值的变量。你的函数名应该已经说明了关于函数返回值的信息。 原文地址 本文已在前端早读课公众号首发:【第952期】JavaScript代码风格要素 译者:墨白 校对:野草 1920年,由威廉·斯特伦克(Will...
阅读 1044·2021-11-24 09:38
阅读 1141·2021-11-23 09:51
阅读 3117·2021-11-16 11:44
阅读 1936·2021-09-22 15:52
阅读 1773·2021-09-10 11:20
阅读 1477·2019-08-30 13:47
阅读 1400·2019-08-29 12:36
阅读 3410·2019-08-26 10:43