weixin_41364787-CSDN博客

原创实现简版 react 状态管理器 mobx

本小节介绍下 react 的一个简单版的状态管理工具 mobx，学习成本低，上手容易。主要介绍属性代理的实现和触发 react 的更新机制

2022-08-07 18:41:10 813

原创 react学习(十) React 中的 context

在平时工作中的某些场景下，你可能想在整个组件树中传递数据，但却不想手动地通过属性在每一层传递属性，应用而生

2022-06-09 23:38:11 273

我们在之前已经学习过 react 生命周期，但是在 16 版本中 will 类的生命周期进行了废除，虽然依然可以用，但是需要加上 UNSAFE 开头，表示是不安全的。React16 废弃的生命周期有 3 个 will：componentWillMountcomponentWillReceivePropscomponentWillUpdate废弃的原因，是在 React16 的 Fiber 架构中，可以中间进行暂停重启操作，调和过程会多次执行 will 周期，不再是一次执行，失去了原有的意

2022-05-29 19:02:52 1169

原创 react学习(八) diff 算法实现

前面几节我们学习了解了 react 的渲染机制和生命周期，本节我们正式进入基本面试必考的核心地带 – diff 算法，了解如何优化和复用 dom 操作的，还有我们常见的 key 的作用。diff 算法使用在子都是数组的情况下，这点和 vue 是一样的。如果元素是其他类型的话直接替换就好。事例分析按照之前的 diff 写法，如果元素不同我们是直接删了 a 再插入的：按照上面图的结构，我们需要知道那个元素变化了，其实右边相对左边只是把 A 做了移动，没有 dom 元素的删除和新增。diff 特点

2022-05-22 20:24:40 231

原创 react 学习(六) 函数组件实例及类组件生命周期

本小节开始前，我们先答复下一个同学的问题。上一小节发布后，有小伙伴后台来信问到：‘小编你只讲了类组件中怎么使用 ref，那在函数式组件中怎么使用呢？’。确实我们只分享了类组件中获取实例的方式没提函数式组件。那是因为函数组件是一个函数，执行完之后就会被销毁，所以正常我们不能直接获取函数组件的实例的。那要是想使用的话怎么办呢？我们先看下正常给函数组件绑定 ref，会是什么效果：function Fn(props) { return <h1>function</h1>;}co

2022-04-18 09:50:29 999

原创 react 学习(五) 完善 setState 及实现 ref

上一小节我们处理了 setState 的批量更新机制，但是我们有两个遗漏点，一个是源码中的 setState 可以传入函数，同时 setState 可以传入第二参数作为回调函数。我们先把上一节的工作收个尾再介绍 ref 的实现。完善 setState立即执行我们在代码中实现如下逻辑，传入函数，我们需要修改一下 getState 方法this.setState((state) => ({ number: state.number + 1 }));this.setState((state) =&

2022-04-12 21:49:16 198

原创 react 学习(四) 批量更新及合成事件

我们上一节了解了组件的更新机制，但是只是停留在表层上，例如我们的 setState 函数式同步执行的，我们的事件处理直接绑定在了 dom 元素上，这些都跟 react 自身的逻辑不符。本小节我们学习下数据的批量更新和 react 中的事件处理。批量更新回顾上一节我们并行执行两个 setState 方法，从下图可知，两个函数同时执行了：handleClick = () => { this.setState({ number: this.state.number + 1, });

2022-04-12 09:13:23 808

原创 react 学习(三) 组件更新

我们上一节了了解了函数式组件和类组件的处理方式，本质就是处理基于 babel 处理后的 type 类型，最后还是要处理虚拟 dom。本小节我们学习下组件的更新机制。我们知道我们定义类组件的时候，只能通过 setState 方式修改状态值，这样页面才会重新渲染。如果你直接修改 state，其实没有什么作用的。实现简版更新机制我们先写下 Counter 的例子，点击加一，如下：// src/index.jsclass Counter extends React.Component { const

2022-04-08 09:21:52 1633

原创 react 学习(二) 实现类和函数式组件

我们上一节了解了 react 的虚拟 dom 的格式，如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层，一个是调用函数返回虚拟 dom，一个是调用实例的 render 方法，返回虚拟 dom，进而转换为真实 dom，本小节我们了解一下具体的实现原理。函数式组件特点函数组件接受一个单一的 props 对象并返回一个 react 元素组件以大写字母开头（内部判断是原生还是自定义）组件必须在使用时定义或引用组件返回值只能有一个根元素(便于树遍历)Re

2022-04-07 10:00:00 345

原创 react 学习(一) 实现简版虚拟 dom 和挂载

楼主最近入职新单位了，恰好新单位使用的技术栈是 react，因为之前一直进行的是 vue2/vue3 和小程序开发，对于这些技术栈实现机制也有一些了解，最少面试的也都能答出来。但对于 react 只是有一定的了解，没有真实的学习过实现，虽然之前也看过一些文章，但是只停留在表面，因为别人这么写了，也就下意识的认为是这样。本次正好配合工作的契机，我们从零开始学习一下，使用的话呢就简单一过，相信大家也都用过或者看完官网也都了解了。如果您是大佬，欢迎批评指正；如果您是初级选手，希望能够一起学习。初始化项目我们借

2022-04-06 21:54:16 689

原创 Vite 学习（三） - rollup & esbuild 基础学习

本小节介绍了 rollup 和 esbuild 的基础用法和插件开发机制

2022-02-13 00:00:14 3839

原创 Vite 学习（四） - vite 插件预学习

vite 插件学习使用，了解自己的钩子函数及和 rollup 插件开发的不同

2022-01-14 22:51:05 939

weixin_41364787的博客