Hook 实现原理请参考 一文彻底搞懂react hooks的原理和实现 前言 对于 react 函数组件，管理组件状态最常用的 hooks 就是useState。 但在某些场景下，例如需要跨多层组件传递状态，或者组件中状态过多（一堆 useState），react hooks 提供了更优雅的解决方法。 useContext 1、可以用来传递状态和方法（例如修改状态的方法） 2、...

阅读 《React 事件代理与 stopImmediatePropagation》的笔记。 React 的事件实现：合成事件 在 reactjs 中，react 没有使用浏览器原生的事件模型，而是使用了「合成事件」。 「合成事件」是什么？ 例如为 div 绑定 onClick 回调函数，这个回调函数并不是通过 div.addEventListener 绑定上去的。 而是放在 re...

Hash Router 实现 实现思路：监听路由 hash 的变化，调用路由对应的回调函数。 实现代码： /* * @Author: dongyuanxin * @Date: 2021-01-07 23:15:50 * @Github: https://github.com/dongyuanxin/blog * @Blog: https://dongyuanxin.github...

功能分析 支持历史版本、日志等元信息，以及有运行统计数据 支持串行和并行编排，并且可以互相嵌套 对接阿里云其他业务，并将其作为模块功能接入进来 用户在使用业务模块时（例如函数计算），会引导开通未此模块需要的功能和进行授权，体验非常丝滑 配置文件分析 和内部实现的「可编排BFF设计系统」（中间层接口编排系统）类似，编排的本质就是定义、维护和解析一份json配置文件。 ...

redux-saga 是做什么？ redux-saga 基于 yield 语法，能够创建+管理更加复杂的异步操作。 比如有时候点击前端按钮，发起异步请求。为了防止频繁点击请求，需要进行节流防抖。除了可以在发起请求的时候，进行节流防抖。还可以把节流防抖的时机提前，在状态更新的时候节流防抖。 怎么理解呢？就是一定时间内的点击，只考虑最近一次的点击。最近这次点击才会触发回调函数，发起异步，更...

如何封装多个 reducer？ 可以将多个 reducer 合并到一个 reducer 中。例如将setTodoList和setNum，都收归到setAppState中。 注意： setAppState 中的子 reducer 都会触发，所以 type 不要重复 setAppState 中的子 reducer 和要更新的 key 一一对应。 /* * @Author: ...

纯 redux 如何处理异步状态 按照 redux 的编程方式，其实可以不借助任何中间件实现异步状态更新。 假设是异步读取文件，大概代码如下： dispatch({ type: "START_REQUEST" }); fs.readFile(filename, (err, content) => { if (err) { return dispatch({...

为什么需要 redux 就个人来说，偏前，开发过前端组件以及云开发控制台；偏后，使用 nodejs 开发过云开发的数据流中台以云开发网关，日流量达到 10 亿+的级别。 目前微服务理念非常火，后端架构都像无状态服务转变，这方便基于 k8s 的横向扩容，应对突发流量。 但是在前端开发中，尤其是控制台这种业务逻辑很重、交互细节繁多的场景下，都是基于数据状态来渲染视图。在 reactjs/v...

权限管理基础版可优化点 新功能对应的接口，添加到对应权限集合后，无法直接生效。需要人工移除角色中的权限集合，再重新添加。操作流程复杂，会影响线上用户。 不支持基于前端路由的权限管控。 不支持一个用户多个角色。 映射关系 二期支持一个用户多个角色，用户、角色、权限集合、接口的关系调整如下： 映射信息存储 后端保存： 用户 <=> 角色列表 ...

目标效果 某个类（TestService）中依赖的其他类（UnitService），不需要在TestService的构造函数中显式的实例化。 只需要使用TS的语法，用private、public、readonly、protected声明构造函数的入参，TestService能自动实例化入参中涉及的类。 被private、public、readonly、protected声明的构造函...