Skip to main content

· 4 min read

React 状态管理库的生态系统非常丰富，提供了多种不同的解决方案来满足不同的需求。以下是一些流行的 React 状态管理库：

  • Redux: 一个非常流行的状态管理库，提供了可预测的状态容器，通常与中间件如 redux-thunk 或 redux-saga 结合使用来处理异步逻辑。

  • MobX: 一个基于透明函数响应式编程 (TFRP) 的状态管理库，它允许状态以可变的方式更新，同时提供响应式和优化的状态派生。

  • Context API: React 自带的状态管理功能，允许开发者在组件树中传递数据而不必手动在每个层级传递 props。

  • Zustand 是一个简单、小巧且快速的状态管理库，它适用于 React 应用程序。Zustand 旨在提供一个简洁的 API 来创建全局状态，并允许组件订阅这些状态的一部分，而不需要使用 Redux、MobX 或 Context API 等更复杂的状态管理解决方案。

  • Recoil: 由 Facebook 提供的一个状态管理库，它提供了一种基于原子的状态管理方式，允许组件订阅状态的一部分，而不是整个状态树。

  • Apollo Client: 如果你使用 GraphQL，Apollo Client 可以作为一个状态管理解决方案，它不仅处理网络请求，还可以管理本地状态。

  • XState: 一个用于管理状态机和状态图的库，适用于复杂状态逻辑的管理。

  • Jotai: 一个原子状态管理库，它的核心概念是原子，每个原子代表应用状态的一部分。

  • Hookstate: 一个简单而强大的状态管理库，它使用 React hooks 作为核心。

  • Easy Peasy: 基于 Redux 的抽象库，提供了简化的 API 和内置的异步处理。

  • Akita: 一个面向对象的状态管理库，它鼓励使用基于类的模型和装饰器。

  • Overmind: 一个声明式的状态管理库，它使用类似于 MobX 的响应式原理，但提供了更多的结构和组织。

  • Rematch: 基于 Redux 的更高级别的抽象，旨在减少样板代码并简化 Redux 的使用。

这些库各有特点，适合不同的场景和偏好。选择哪个库取决于你的项目需求、团队熟悉度以及你对状态管理的哲学。

· 2 min read

视觉稿工具​

pixso​

  1. 可以使用pixso在线打开sketch文件
  • 导入文件
  • 研发模式：右侧的标注下面可以进入研发模式
  • 单画板模式：先进入研发模式，然后选中单个画板，点击【定位】按钮或双击画板空白处
  1. 可以pixso资源社区搜索模板
  • 比如搜索电商
  • 然后复制文件到我的草稿，就可以在草稿中打开选择标注进入研发模式

即时设计​

跟pixso功能类似。搜索资源后，点击使用

MasterGo​

跟pixso功能类似。搜索资源后，点击创建副本

UI设计​

优设​

摹客DT​

在线设计UI

Visily​

  • 可以根据截屏直接生成好UI设计稿
  • 也可以搜索模板

· One min read
tip

Volta is a JavaScript Tool Manager. Install and run any JS tool quickly and seamlessly! Volta is built in Rust and ships as a snappy static binary.

1. install​

curl https://get.volta.sh | bash
  • 或者使用brew：brew install volta
  • 如果不能全局使用，可以手动设置：
    • Set the VOLTA_HOME variable to $HOME/.volta
    • Add $VOLTA_HOME/bin to the beginning of your PATH variable

· 11 min read

动画、游戏、3D​

TweenMax.js​

适用于移动端和现代互联网的超高性能专业级动画插件

Tweenmax是GreenSock 动画平台的核心，配合其他插件可动画CSS属性、滤镜效果、 颜色、 声音、 色彩、 帧、 饱和度、 对比度、 色调、 色系、 亮度、 贝塞尔

GSAP (GreenSock Animation Platform)​

GSAP 是一个强大的 JavaScript 工具集，构建适用于所有主要浏览器的高性能动画。动画 CSS、SVG、画布、React、Vue、WebGL、颜色、字符串、运动路径、通用对象......任何 JavaScript 可以触及的东西！ GSAP 的 ScrollTrigger 插件可让您以最少的代码创建令人惊叹的基于滚动的动画。

GreenSock

Spine​

Spine 是一款针对游戏开发的 2D 骨骼动画编辑工具。 Spine 旨在提供更高效和简洁 的工作流程，以创建游戏所需的动画。

Lottie​

Lottie 是一个 iOS、Android 和 React Native 库，可以实时渲染 After Effects 动画，让应用程序可以像使用静态图像一样轻松地使用动画。

DragonBones​

DragonBones是一款开源免费的移动游戏骨骼动画解决方案，主要用于创作2D游戏动画和富媒体内容,帮助设计师用更少的美术成本创造更生动的动画效果。 支持多语言，一次制作，全平台发布。

phaser3​

Phaser 3 是 Phaser 游戏框架的下一代。每个最后的元素都使用完全模块化的结构从头开始重建，并结合了面向数据的方法。它包括一个全新的自定义 WebGL 渲染器，专为满足现代 2D 游戏的需求而设计。

D3.js​

D3.js 是一个基于数据操作文档的 JavaScript 库。 D3 帮助您使用 HTML、SVG 和 CSS 使数据栩栩如生。 D3 对 Web 标准的强调为您提供了现代浏览器的全部功能，而无需将自己束缚在专有框架中，结合了强大的可视化组件和数据驱动的 DOM 操作方法。

highcharts​

兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库

threejs​

Three.js 是一款基于 WebGL 的强大 JavaScript 库，用于在 Web 浏览器中创建和呈现三维图形。它提供了基础的 3D 渲染功能，包括几何体创建、材质和光照效果。

主要功能：

  • 3D 场景与模型：Three.js 支持导入多种格式的 3D 模型，包括 OBJ, STL, FBX 等，并可以创建自定义的 3D 几何体。

  • 材质与材质材料：Three.js 支持多种材质类型，如基础材质、材质材料等，可以实现逼真的渲染效果。

  • 灯光与阴影：Three.js 支持各种光源，如点光源、平行光源等，并且可以设置阴影，增强场景的真实感。

  • 动画与物理引擎：Three.js 内置动画库，可以创建关键帧动画，同时也支持使用 Cannon.js 等物理引擎实现更真实的物理动画效果。

  • 插件扩展：Three.js 有活跃的社区，有许多第三方插件可以扩展其功能，如 GLTFLoader 用于导入 GLTF 模型，OrbitControls 用于轨迹控制等。

  • 支持 VR 与 AR：Three.js 支持 VR 和 AR 体验，可以通过相关插件实现在 VR 设备上的 3D 应用。

应用场景： 数字孪生、智慧城市、智慧园区、网页游戏、数据可视化、三维展示等。

相关教程资源:

Cesium​

Cesium 是一款开源的基于 JavaScript 的 3D 地图框架，它利用了现代 Web 技术，如 HTML5、WebGL 和 WebAssembly，来提供跨平台和跨浏览器的三维地理空间数据可视化。

主要功能:

  • 多视图支持：Cesium 支持以 2D、2.5D 和 3D 形式展示地图，无需为每种视图分别编写代码。

  • 动态地理信息数据可视化：Cesium 能够使用时间轴动态展示具有时间属性的数据，支持使用符合 OGC 标准的 WMS、WMTS 等多种地图服务。

  • 多种数据格式支持：Cesium 支持加载 KML、GeoJSON 等格式的数据绘制矢量图形，以及加载 3D Tiles 和 glTF 格式的三维模型，包括点云、倾斜摄影等大规模模型数据。

  • 高性能和高精度：Cesium 对 WebGL 进行优化，充分利用硬件加速功能，并提供底层渲染方法进行可视化，包括绘制大型折线、多边形、广告牌、标签等 API，以及控制摄像头和创造飞行路径等坐标、向量、矩阵运算方法。

  • 开源和免费：作为一个开源项目，Cesium 是免费使用的，拥有活跃的社区支持和持续的更新。

应用场景： 地理信息系统（GIS）、城市规划与设计、航空与卫星图像的可视化、数字孪生、智慧城市、智慧园区、数据可视化

相关教程资源:

Babylon.js​

Babylon.js 是一个开源的 3D 引擎，专门为 Web 浏览器设计，允许开发者创建和展示交互式 3D 内容，无需安装任何插件。

它是基于 WebGL 技术构建的，这意味着它可以利用现代浏览器内置的图形硬件加速功能来渲染 3D 图形。

主要功能:

  • WebGL 支持：支持 WebGL 1.0、2.0 和 WebGPU，使得 3D 内容可以在无需插件的情况下在现代浏览器中运行。

  • 完整的场景图：包括灯光、摄像机、材质、网格、动画、音频和动作等元素。

  • 跨平台原生应用部署：支持 iOS、Android、MacOS、Win32 和 UWP 等平台。

  • 物理引擎集成：支持 oimo.js、ammo.js 和 cannon.js 等多种物理引擎。

  • 粒子系统：支持 CPU 和 GPU 两种模式渲染的粒子系统，以及立体粒子系统。

  • 基于 Web Audio 的音频引擎：提供高质量的音频支持。

  • 硬件加速的 GUI：提供交互式图形控件，如按钮、多选框等。

  • 着色器和渲染：支持节点材质、基于物理的渲染(PBR)、镜面反射、透明度贴图等多种着色器效果。

  • VR 和 WebXR 支持：允许开发者创建沉浸式的虚拟现实体验。

应用场景： 游戏开发、教育、建筑可视化、产品展示、数据可视化、虚拟现实和增强现实(AR)。

相关教程资源:

Unreal Engine​

Unreal Engine（简称 UE）是由 Epic Games 开发的一款功能强大的游戏引擎，它被广泛用于开发各种类型的游戏、模拟、可视化项目以及交互式体验。

Unreal Engine 5（UE5）是最新版本的引擎，它引入了新的技术和功能，如 Lumen 全局光照系统、Nanite 虚拟化微多边形几何技术等，进一步提高了渲染质量和开发效率。

在 UE 中我们可以使用 Cesium for Unreal 插件来将 Cesium 集成到 Unreal Engine 中，从而实现 Cesium 在 Unreal Engine 中的使用。

主要功能:

  • Cesium ion 集成：Cesium for Unreal 插件提供了与 Cesium ion 的集成，Cesium ion 是一个基于云的平台，提供了对全球高分辨率 3D 内容的即时访问，包括摄影测量、地形、图像和建筑物。

  • 地理参考组件：CesiumGeoreference 组件允许开发者将场景放置在全球环境中，以便与 Unreal Engine 中的本地环境更平滑地交互。

  • 数据流和可视化：Cesium for Unreal 可以流式传输和可视化来自 Cesium ion 的数据，使用开放标准构建丰富的 3D 地理空间应用程序。

  • 跨平台支持：与 Unreal Engine 一样，Cesium for Unreal 支持多种平台，包括 PC、游戏主机、移动设备和 VR/AR 设备。

  • 开源和免费：作为一个开源项目，Cesium for Unreal 对所有用户免费，拥有活跃的社区支持。

应用场景： 游戏和模拟、可视化、交互式体验、虚拟现实和增强现实(AR)、产品展示和数据可视化、智慧城市、智慧园区。

相关教程资源: UE5+Cesium智慧城市&园区视频教程