New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

React 组件设计原则 #2

Open

TopGrd opened this issue Oct 11, 2018 · 0 comments

Owner

TopGrd commented Oct 11, 2018 •

edited

Loading

组件的设计原则
react-component 这里的大多数组件是 ant design 的底层依赖，他们大都很好的遵循了我们的一些设计原则，这里简单概括下：

职责清晰、单一职责

组件里的每个模块，分别该承担某一个功能
- 多个组件 / 模块协同完成一件事，而不是一个组件替其他组件完成本该它自己完成的事情
开放与封闭
- 属性配置等 API 对外开放；组件内部 dom 及状态的更改、对外封闭
高内聚、低耦合
- 组件内部通过 callback 方式直接调用，组件与组件之间通过发布订阅的模式通信
避免信息冗余
- 例如：一个东西能被另一个推导出来，就只使用一个
API 尽量和已知概念保持一致
- API 命名：比如聚焦常用命名是 focusable 而不是 canFocus 等自己臆想的名字、还有如 * onDeselect 等规范名字。
- API 的功能要单一并表意：比如 active 表示活动状态、但不能代替表示 selected 选中状态。

前端组件设计杂谈

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment