YIFEI

前端工程师 | 用友

赞

25

|

搜索文章

赞

文章( 25 ) 沸点( 0 )

五、「深入React源码」--- 手写实现ref

React的ref一共有三种形式：原生组件的ref、类组件的ref、函数组件的ref。本文将按照源码思想手写实现这三种方式

syukuu
3年前
668
3
评论

六、「深入React源码」--- 手写实现组件生命周期

本文将手写实现以下阶：初始化 initialization，初始化状态和属组件挂载组件将要挂载componentWillMo

syukuu
3年前
113
3
评论

七、「深入React源码」--- 手写实现DOM-DIFF算法

React从零开始设计的时候就考虑了性能的问题。在这篇文章中，我将介绍React中的diff算法和渲染过程。这样就能

syukuu
3年前
773
3
评论

八、「深入React源码」--- 手写实现新的生命周期

准备 React 16前的生命周期在React 16引入fiber之后就不合适了，因为如果要开启async rendering，在render函数之前的所有函数可能会被React暂停、中止或重新启

syukuu
3年前
459
3
评论

九、「深入React源码」--- 手写实现Context

Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据。Context 其实使用的是Provider和Customer模式，和reac

syukuu
3年前
579
4
评论

十、「深入React源码」--- 高阶组件

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式

syukuu
3年前
306
4
评论

十一、「深入React源码」--- React性能优化

性能优化，本质就是减少页面重新渲染的次数。类组件：PureComponent ；函数组件：memo 。PureComponent 纯组件，核心是内部重写了should

syukuu
3年前
687
4
评论

十二、「深入React源码」--- 手写实现Hook之useState

更新是如何发生：调用useState，内部通过setState修改状态后，调用scheduleUpdate方法，从根节点执行完整的dom-dif

syukuu
3年前
617
5
评论

十三、「深入React源码」--- 手写实现Hook之useMemo、useCallback

函数调用就会创建新的组件，父组件如果更新，执行updateFunctionComponent方法，内部会重新调用函数，生成新的函数组件，因此子组件的也会重新渲染。无形中会造成多余的、不必要的性能消耗

syukuu
3年前
1.2k
11
评论

十四、「深入React源码」--- 手写实现Hook之useReducer、useContext、useEffect

useReducer是useState的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的

syukuu
3年前
449
3
评论

个人成就

文章被点赞 30

文章被阅读 8,148

加入于

2022-03-18