React 常用UI组件库及状态管理 | 青训营

95 阅读2分钟

React 常用UI组件库

1、Ant Design ##  

优点:  
随附了大量支持文档,有一个社区,包括一个带有预制模板的单独项目(AntDesignPro)  
可用来快速设计后台/内部应用的 UI 库  
缺点:  
缺乏可访问性  
体积很大,预计会对性能产生较大影响  
污染你的 CSS(期望添加!important 以防止它样式化你的非 Ant 组件)

2、Bootstrap

优点:  
带有 React 绑定的 Bootstrap 库,大家都喜欢   
通过 CSS-in-JS 轻松自定义    
流行了时间长,不必担心错误 / 问题  
没有 jQuery 依赖,因为它已在 React 中完全重新实现    
缺点:  
这是 Bootstrap,如果你不做自定义,则你的网站将与其他网站没什么区别  

3、Bulma

优点:   
不会让你的网站长一副 Bootstrap 的样子   
现代化特性(底层是 Flexbox/ 网格)   
缺点:  
可访问性:虽然有一些,但没有像其他库那样严格遵守 WCAG 准则   

4、Chakra UI

优点:  
可访问性:遵循 WAI-ARIA 准则,组件使用 aria 标签  
易于定制(带有主题支持)    
高度模块化   
缺点:  
相当新,可能会出现问题

5、Material UI

优点:  
完善的文档  
图标库很大  
缺点:  
定制起来困难,但却很有必要(以改善视觉效果)   
性能:会渲染过多的 DOM 节点   
你的应用看起来会像谷歌的产品(对于某些人来说,这可能代表一种专业风格)  

6、Semantic UI

优点:  
可组合(使用 as prop 传递组件)  
易于定制  
好用的文档  
用户很知名(Netflix 内部使用,Amazon 发布的产品也在用)  
TypeScript 支持  
缺点:  
开源项目的潜在不确定性

React 状态管理

状态管理的目的是确保应用程序中的不同部分可以共享和访问相同的状态数据,并且可以对状态进行一致的更新和变更。同时,状态管理还可以提供一种可预测和可维护的方式来处理应用程序中的状态变化。

1、redux

action(描述状态变化的对象)  
reducer(描述如何处理action并更新状态)   
store(用于存储状态)

2、mobx

使用注解(如@observable)标记状态的变化  
使用@observer注解来自动追踪状态的变化