GLSL Shader简介WebGL 的底层是使用 OpenGL ES，OpenGL 是一个用于处理 2D 和 3D 图形的快速库 OpenGL ES 是 OpenGL 的一个版本，面向可能具有更多受限硬件的设备，因此可以很好的运行在移动端设备 要使用 GLSL 需要一个 OpenGL 平台 WebGL 使得可以在浏览器中使用 OpenGL 本章以 WebGL 平台为执行环境的 threeJs 库

React 组件性能优化核心：减少渲染真实 DOM 节点的频率，减少 vDOM 比对的频率 组件卸载前进行清理操作在组件中为 window 注册的全局事件,以及定时器,在组件卸载前要清理掉,防止组件卸载后继续执行影响应用性能 需求:开启定时器然后卸载组件，查看组件中的定时器是否还在运行。 123456789101112131415161718const Son = () => {

React&TS基础useState自动推导通常 React 会根据传入 useState 的默认值来自动推导类型,不需要显式标注类型 123// value: 类型为 boolean// toggle: 参数类型为 booleanconst [value, toggle] = useState(false); 传递泛型参数useState 本身是一个 泛型函数 ，可以传入具体的自定义类

zustandgraph LR A-->|绑定到组件|B subgraph A[ store] A1((创建store)) A2((状态数据)) A3((操作方法)) end subgraph B[ component ] B1((Component)) B2((消费数据和方法))

ReactRouterReactRouter 基础什么是前端路由一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候，path 对应的组件会在页面中进行渲染 12345678910const routes = [ { path: "/article", component: Article, },

Redux 什么是 Redux Redux 是 React 最常用的 集中状态管理工具 ，类似于 Vue 中的 Pinia(Vuex)， 可以独立于框架运行 作用：通过集中管理的方式管理应用的状态 使用步骤： 定义一个 reducer 函数 (根据当前想要做的修改返回一个新的状态) 作用：根据不同的 action 对象，返回不同的新的 state 1234567891011//state:

ReactReact 基础React 基础事件绑定语法： on + 事件名称 = { 事件处理程序 } ，整体上遵循驼峰命名 123456function App() { const clickHandler = () => { console.log("button 点击了"); }; return <butto

图图的定义图：图（Graph）是由顶点的有穷非空集合和顶点之间边的集合组成的，通常表示为 G（V,E），其中，G 表示一个图，V 是图 G 中顶点的集合，E 是图 G 中边的集合 graph TB 1 2 3 4 5 6 7 8 9 1---2 1---3 2---4 2---5 2--

树树的定义树：树（Tree）是 n（n≥0）个结点的有限集。n=0 时称为空树。在任意一棵非空树中，有且仅有一个特定的称为根（Root）的结点；当 n>1 时，其余结点可分为 m（m>0）个互不相交的有限集 T、T2、…、Tm，其中每一个集合本身又是一棵树，并且称为根的子树（SubTree） n>0 时根结点是唯一的，不可能存在多个根结点，数据结构中的树是只能有一个根

串串的定义串：串（string）是由零个或多个字符组成的有限序列，又叫字符串 一般记为 s=“a1a2…an”（n≥0），其中，s 是串的名称，用双引号（有些书中也用单引号）括起来的字符序列是串的值，注意引号不属于串的内容。a(1≤i≤n)可以是字母、数字或其他字符，i 就是该字符在串中的位置。 串中的字符数目 n 称为串的长度， 定义中谈到“有限”是指长度 n 是一个有限的数值。 零个