- 博客(152)
- 收藏
- 关注
RSS订阅原创 React 组件性能优化
原生事件销毁->通常在中注册一些原生事件（如scroll,resize）定时器类销毁->开发中常见的定时器类操作需在合适的位置（componentWillUnmount）进行销毁，否则易造成内存溢出。
2023-10-15 13:15:00
273
原创 TypeScript & React（上）
TypeScript（静态类型更适合管理复杂的应用）更严格、更高效的JavaScript（动态类型的编程语言)扩展组件和方法的复用型，不与any等同，存在约束性。TypeScript 官方文档。TypeScript 入门教程。英文（中文翻译稍显落后）更好的理解 TS 泛型。相对比较好入门的文档。
2023-10-13 22:45:00
520
原创 React 状态管理 - Redux 进阶（下）提升开发体验
immer.js【让状态可追溯、避免副作用、纯函数，大型项目必备，避免一些不必要的问题：健壮性，维护问题】3.团队方案：社区是否完善【市场层面，学习圈层面是否足够大】，技术栈是否贴合【与我们团队的技术栈是否贴合】新的react项目建议使用dva或@rematch/core是比较成熟的框架；旧的react项目redux解决多层范式问题建议使用redux-actions；2.改造成本：使用后，团队的是否接受，收益是什么，纯技术类还是包含产品类。Redux扩展&更多状态管理方案。1.接入成本：学习的曲线。
2023-09-07 23:00:00
212
原创 React 状态管理 - Redux 进阶（上）
优化使用Redux，让应用更高效在react中修改全局state就是个同步的过程。通过具体的类型，立刻改变state，和拉取服务端数据的过程是异步的。这个是dispatch没有具体结果。
2023-09-06 13:00:00
59
原创 React 状态管理 - Redux 入门
全局状态Store操控->视图View变更触发->Actions->Reducers接收->返回给Store不同的小state构成全局状态Store。reducer : 结合state和action，并返回一个新的state。Redux基础：核心原则【改变数据的方式只能事action】state : 应用全局数据的来源，数据驱动视图的核心。React-Redux ：只做一个单页面应用的流程。action: 数据发生改变动作的描述。构建复杂React应用。为什么需要Redux？
2023-09-05 23:30:00
94
原创 React原理 - React New Component Lifecycle
2.我们之前并不是Fiber Reconciler中导致的，在刚开始接触React的时候会有大部分同学，会在componentWillMount进行set相关操作（setState，进行初始化redux操作，以及调用接口异步操作）【应该写在构造函数constructor中】,不然会多进行一遍vDom diff；->render()->React更新DOM和refs->componentDidMount()->React更新DOM和refs->componentDidUpdate()需要回归的点非常多！
2023-09-02 22:00:00
186
2
原创 React原理 - React Reconciliation-下
如果执行过程中被打断或者响应更高优先级的任务，也能在 workInProcess Tree中继续开始。React 在挂载或者更新过程中会做很多事情，比如调用组件的渲染函数、对比前后树差异，而且commit阶段是同步的，所以在Stack Reconciler中会导致卡顿等问题。更新阶段，在确定更新内容后，提交更新并调用对应渲染模块（react-dom）进行渲染。【这个过程用户是看的见的】为了防止页面抖动，执行组件的render方法（函数组件对应return），dom diff 确定哪些需要更新。
2023-09-01 23:00:00
283
原创 React原理 - React Reconciliation-上
由事务性导致它的更新是一气呵成的，在组件比较复杂，耗时比较长的时候，与此同时，如果有用户输入、点击。【浏览器没有将这些事件定义为高优先级，一视同仁】就会比较卡顿，因为大部分运算还是在处理更新渲染。【渲染过程不可阻断，一旦页面更新过于复杂，耗时过长，页面操作就会卡顿】setState是大部分情况是异步的【onClick，onChange，组件生命周期调用】setState不处于事务性更新过程时，是同步的【新的更新周期时是立刻执行的】react协调：Virtual Dom转化成真实UI的过程。
2023-08-31 21:45:00
622
原创 React原理 - React Virtual DOM 原理
HTML DOM是个完整的树，常规树遍历的时间复杂度是n³，正是vdom对HTMLdom节点层次的划分，使得HTML树在Vdom中遍历的时间复杂度降为n0这也是Vdom高效的原因之一。实际应用中，页面的操作逻辑会比较复杂频繁，多次频繁操作Dom会导致页面重绘，页面重绘是影响页面性能的关键指标，造成卡顿。虚拟DOM（virtualdom，VDOM）是一个编程概念，将UI的“虚拟”表示形式保存在内存中，并通过ReactDOM之类的库渲染成“真实”的DOM,这个过程叫做协调。用JS对象的形式表示HTML。
2023-08-24 23:00:00
436
原创 React实战 - React路由鉴权
关于配置的属性值其实就是React-router所需要的传入参数，包括key，path，exact，component，而导航是配置了三个属性：title（导航名称），key和对应的path。这样我们的路由配置部分就完成了。有了配置之后，就需要把配置在组件内做渲染，这时就需要定义一个通用的函数，它的输入就是上面的配置对象，而输入则是React-router组件。首先我们创建一个配置js文件，用于存放之前我们分析的两种路由配置，另外由于管理后台的菜单路由也是关联的，也同时要创建一个导航的配置。
2023-08-21 13:00:00
640
原创 React 生态应用 - Ant Design
不包含antd UI层的展现，可以在DvaJS这个框架的基础下，去做一个AntDesign UI 层的构建，主要是基于redux【状态管理工具】轻量数据流解决方案。构建大型应用的一个框架【进阶版的create react脚手架工具】，再此基础上可以构建Ant Design Pro框架。专注于在reat框架中使用动画的一个库。很多产品集合成的做数据可视化的一些应用。是Ant Design的进阶版。
2023-08-20 13:00:00
108
原创 React 生态应用 - React Router（1）
基于浏览器开发的我们，只需要安装react-router-dom就可以了。React-Router v6 新特性解读及迁移指南。react-router-dom 提供的相关组件。阅读react router组件文档。
2023-08-18 21:15:00
103
原创 步入React正殿 - React组件设计模式
【题目1】分别使用Render Props和HOC模式实现购物车ToolTips功能；高阶组件是对已有组件的封装形成新的组件之后有自己的状态和逻辑并可以传递已有的组件。【题目2】说明Render Props 和 HOC设计模式的优缺点分别是什么；复用业务逻辑：判断用户是否是vip：是->有列表，有推荐。【props.action】显示逻辑，只需要将。一个组件—高阶函数—>新的逻辑的组件。ItemA,ItemB都需要相同的。2.使用函数作为Props。
2023-08-17 22:00:00
232
1
原创 步入React正殿 - 生命周期
同学可以使用上面的素材，可以使用MVC设计，也可以不使用，自己发挥实现一个Todo应用。React新生命周期。
2023-08-16 22:30:00
86
1
原创 步入React正殿 - State进阶
尽可能通过状态提升原则，将需要的状态提取到父组件中，而其他的组件使用无状态组件编写【父组件有状态，子组件无状态】如下图，如果没有创建新的引用，在PureComponent中，不会调用render。如下图，使用不可变数据，可以避免引用带来的副作用，使得整个程序数据变的易于管理。【题目2】 目前Header中显示的是商品种类数量，改造成商品的总数目。【题目1】 用单一数据源原则和状态提升原则改造购物车工程。处理组件和子组件数据传递，自顶向下单向流动。无状态组件简单好维护，单一从上而下的数据流。
2023-08-15 22:45:00
1236
原创 步入React正殿 - 认识State
当一个变量涉及到UI了，就需要将其设置为State【组件UI状态变化值】// 类的构造函数// 定义Statecount: 0,price: 99是否通过props从父组件获取是否可以通过其他state和props计算得到是否在render方法中使用不能在父组件获取，不能计算得到，UI交互，render中使用。
2023-08-13 14:45:00
99
原创 步入React正殿 - 事件处理
react会把所有的事件绑定到document上面，而不是某一个元素上面，统一的使用事件监听，并在冒泡阶段处理事件，所有当挂载卸载组件的时候，只需要在统一的事件监听位置增加或删除对象，因此会极大的提高效率。事件注册是在组件生成的时候我们将listen dom中的所有的事件对应的原生事件都注册到document的监听器当中（ListenerBank中）并以key作为索引。【Dom事件的基本模型】事件捕获=>目标对象本身的事件处理=>冒泡。当事件触发的时候，我们的组件会生成一个合成事件，
2023-08-12 09:30:00
136
原创 步入React前厅 - Css In React
1.将案例的购物车列表改为单双行不同的样式（例如双数行底色为： #ddd）在React中使用css预编译。
2023-08-11 22:15:00
829
原创 步入React前厅 - Props、列表渲染、条件渲染
当React元素作为自定义组件，将JSX所接受的属性转换为单个对象传递给组件，整个对象被称为“props”【properties】【属性】父组件传递给子组件的参数对象Props是组件的固有属性【通过jsx标签传递给子组件】在子组件内部不可以对props进行修改更新props：需要通过父组件重新传入新的props更新子组件【react是单向数据流，父->子数据】
2023-08-08 21:15:00
204
原创 步入React前厅 - 组件和JSX
模板引擎语言：Angular、Vue里的语法template语法、NodeJS。JSX是Javascript的语法扩展，使用XML标记的方式直接声明界面。1、将Vue相关JSX练习中的棋盘练习在React中练习。2、将写好的Jsx在Babel中转义，了解解析过后的代码。Babel 是一个 JavaScript 编译器。MVN Node版本管理。react关注点分离。
2023-08-07 08:30:00
92
原创 步入React前厅 - 搭建React环境
这个脚手架是官方支持的创建单页面React应用的工具【提供开发模式，线上build一系列工具】进行不同版本node的切换）+可以在线编辑，上传，下载源码。MVN Node版本管理。
2023-08-06 12:45:00
118
原创 React相关学习导引
facebook工程师在2011年开发的，高效的、专注业务开发，无需和dom打交道的框架，并且轻量、易于扩展用于构建用户界面的JavaScript库【偏重解决UI层（界面层）问题】构建用户界面 => 组件（Components）【一小块UI界面】，是独立的可重复使用的。每个区域是一个组件React官网。
2023-08-05 12:30:00
125
原创 TypeScript实战篇 - TS实战： 服务层开发 - 完整的聊天服务
【代码】TypeScript实战篇 - TS实战： 服务层开发 - 完整的聊天服务。
2023-08-04 21:15:00
315
原创 TypeScript基础篇 - TS模块
为什么抽象模块？隔离和封装1.隔离，让外部看不到模块内部的成员，避免大量成员的全局冲突2.避免让用户使用起来感到复杂，觉得这个模块很复杂，开箱即用，封装就是把功能封装进去模块解析通常用node还classic?node【node不是默认项，需要设置一下】},
2023-07-29 22:00:00
475
原创 TypeScript基础篇 - TS类【Class】
/ ts得先声明一下x: numbery:numberthis.x = xthis.y = y。
2023-07-28 22:45:00
1192
原创 TypeScript基础篇 - 类型的窄化【类型的收缩】
Narrowing本质：TS根据Type Guard重新定义子语句类型。避免：TypeError：null is not iterable。Narrowing的现象和原理。断言一个函数的类型并窄化。断言一个表达式的类型。
2023-07-25 06:30:00
107
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人