React的组件封装新规范，应该以HTML的结构树进行填写

最新推荐文章于 2024-07-19 11:34:13 发布

原创

最新推荐文章于 2024-07-19 11:34:13 发布 · 255 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #html #javascript

本文探讨了React组件封装的最佳实践，建议采用HTML结构树的方式提高可读性和灵活性。通过示例说明了如何创建复合组件，利用Context实现组件间的通信，减少接口暴露，提升组件的可复用性。强调在组件设计时要考虑未来可能的用例，避免过度抽象导致复杂性的增加。

近一年的code review的工作中，需要制作一些高可用的业务场景组件。那我的首要工作当然也是要写高可用的组件库啦。

在这一段的工作里面，我发现一个问题，像我们这些中小企业来讲一般都是基于antd的组件进行开发。当然react也给出了一套自己的组件封装规范。

可重用的组件是什么样的？

我们以antd的modal组件为例子。按照antd的案例代码来演示。我们平时写代码的时候是怎么阅读的呢？大概是如下情况。

<Modal 
    visible={visible} 
    title="Title" 
    onOk={this.handleOk} 
    onCancel={this.handleCancel} 
    footer={[ 
    <Button key="back" onClick={this.handleCancel}> Return </Button>,
    <Button key="submit" type="primary" loading={loading} onClick={this.handleOk}> Submit </Button>, 
    <Button key="link" href="https://google.com" type="primary" loading={loading} onClick={this.handleOk} > Search on Google </Button>, ]} > 
    <p>Some contents...</p>
    <p>Some contents...</p> 
    <p>Some contents...</p> 
    <p>Some contents...</p>
    <p>Some contents...</p> 
</Modal&g