2018.10.18 星期四 9:46

文档

文档v18: https://zh-hans.react.dev/learn/managing-state
Hook API 索引

规范

标准代码规范

eslint-config-react-app

eslint-config-react-app: https://www.npmjs.com/package/eslint-config-react-app

This package includes the shareable ESLint configuration used by Create React App.
https://github.com/facebook/create-react-app/blob/main/packages/eslint-config-react-app/index.js
1
2
3
4
5
6
7
// ...
// http://eslint.org/docs/rules/
// https://github.com/benmosher/eslint-plugin-import/tree/master/docs/rules
// https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules
// https://github.com/evcohen/eslint-plugin-jsx-a11y/tree/master/docs/rules
// https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks
// https://github.com/gajus/eslint-plugin-flowtype

A mostly reasonable approach to JavaScript

Airbnb React/JSX 编码规范: https://github.com/JasonBoy/javascript/tree/master/react

项目/应用实践

01 类型检查
02 组件的组织
03 样式的管理
04 组件的思维

05 状态管理

React组件设计实践总结01 - 类型检查

函数组件
1️⃣ 使用ComponentNameProps 形式命名 Props 类型, 并导出
2️⃣ 优先使用FC类型来声明函数组件
3️⃣ 不要直接使用export default导出组件.
4️⃣ 默认 props 声明
5️⃣ 泛型函数组件
6️⃣ 子组件声明
7️⃣ Forwarding Refs

类组件
1️⃣ 继承 Component 或 PureComponent
2️⃣ 使用static defaultProps定义默认 props
3️⃣ 子组件声明
4️⃣ 泛型

高阶组件
Render Props
Context
杂项
1️⃣ 使用handleEvent命名事件处理器.
2️⃣ 内置事件处理器的类型
3️⃣ 自定义组件暴露事件处理器类型
4️⃣ 获取原生元素 props 定义
5️⃣ 不要使用 PropTypes
6️⃣ styled-components
7️⃣ 为没有提供 Typescript 声明文件的第三方库自定义模块声明
8️⃣ 为文档生成做好准备
9️⃣ 开启 strict 模式

插件

拖拽排序

react-drag-sortable

react-drag-sortable-plus：https://github.com/yalhu/react-drag-sortable-plus

.draggable {
  cursor: move;
  margin-bottom: 10px;
}
// 复制的元素
.dragged {
  width: 349px;
  background:#d9d9d9;
  opacity: 0.7;
}
// 被复制元素
.placeholder {
  opacity: 0.5;
}

issue

placeholder 高度问题。引起拖动时元素间距丢失。

用 react-drag-sortable-plus ingoreCls 可以解决input等嵌套元素拖动问题

嵌套input，textarea 有光标标签。或者有滑动元素，比如react：slider
input/textarea, slider 等需要跳过拖动；
而且是嵌套的子元素（用no-drag 无效)

Disabling drag on form tags?

新建了npm，在原有的lib里面做了判断

react-dnd 也有这个问题

ui库

React常用的5个UI框架
 React的十大UI框架
# 91 八个好用的React UI组件库
1、Material UI
地址：https://mui.com/zh/

Material 是简单且可定制的组件库，它也是我最喜欢的。易于上手，并且库已经加载了大多数应用程序需要/需要的组件集。
2、 Ant Design
地址：https://ant.design
优雅的企业级产品设计系统。Ant Design 提供了 50 多个可用于创建精美 Web 应用程序的组件。

3 、React Bootstrap
地址：https://react-bootstrap.github.io/
对于熟悉 Bootstrap 框架的团队和个人来说，使用 React Bootstrap 会很容易和舒适。它提供大量组件集，遵循与 Bootstrap 框架类似的类和模式。

4、 Rebass
地址：https://rebassjs.org/
React 使用样式系统构建的原始 UI 组件，您可以选择主题、变体等等。还通过文档提供出色的支持。

5、Blueprint
地址：https://blueprintjs.com/
又一个很棒的 React UI 库。该库针对构建复杂的数据密集型界面桌面应用程序进行了优化。

6、 Semantic UI React
地址：https://react.semantic-ui.com/
它与 React Bootstrap 非常相似，因为它是 Semantic UI 的 React 版本，Semantic UI React 提供 React 组件，而 Semantic UI 提供主题作为 CSS 样式表.

7、Chakra UI
地址：https://chakra-ui.com/
Chakra UI 是一个简单、模块化且可访问的组件库，它为您提供构建 React 应用程序所需的构建块。

8、Evergreen UI
地址：https://evergreen.segment.com/

Semi Design - 抖音团队力作，虽简洁轻量，可轻松应对复杂场景，抖音内部多项目迭代，品质可靠
TDesign - 腾讯优质 UI 组件，配套工具完满，设计工整，文档清晰
ArcoDesign - 字节跳动 UI 组件库开源，大厂逻辑，设计文档完美
Ant Design React - 阿里前端 UI 库，面向企业级中后台
Material-UI - 全球顶级 React 组件库 Google Material 设计标准
微软 FluentUI - 背靠微软，大型项目首先，代码简洁高效
Element for React - 饿了么出品 Element 的 React 版，适合有使用 Element 习惯的开发者