![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端框架
大神小小生
这个作者很懒,什么都没留下…
展开
-
react15-源码演化-核心总揽(七)
react15核心总揽完成了react15的推演逻辑,之后的章节就是利用fiber实现react16react15代码放在这一章,测试代码需要回顾之前几章src/react/component.jsimport { compareTwoElements } from './vdom';//更新队列export const updateQueue = { updaters: [...原创 2020-04-27 22:39:49 · 189 阅读 · 0 评论 -
react15-源码演化-context和批量更新(六)
context和批量更新1. 思路回顾,避免混淆1.1. createDOM 和 虚拟DOMcreateDOM是创建真实的DOM元素,创建后通过element.dom = dom关联,最终由parentNode的方法挂载到页面。虚拟DOM代码中用element表示,用于dom-diff比较和更新逻辑,总体设计原则:如果通过element可以更新完毕,则不使用真实DOM,如果遇到类型不一致...原创 2020-04-27 22:16:20 · 347 阅读 · 0 评论 -
react15-源码演化-生命周期(五)
生命周期1. 旧版生命周期1.1. src/index.jsimport React from './react';import ReactDOM from './react-dom';class Counter extends React.Component { static defaultProps = { name: '珠峰架构' }; constructor(props...原创 2020-04-27 22:13:05 · 496 阅读 · 2 评论 -
react15-源码演化-dom-diff(四)
dom-diff1. 整体策略1.1. 递归算法深度优先遍历:先序 —> 父节点,左子树,右子树中序 —> 左子树,父节点,右子树后序 -> 左子树,右子树,父节点注意:先序、中序、后序指的是操作节点时,因为检索一般都是从根开始的,而对节点进行操作时,才是先序、中序、后序的意义所在。多叉树递归,深度优先遍历let tree = { node: ...原创 2020-04-27 22:09:16 · 335 阅读 · 0 评论 -
react15-源码演化-组件更新setState(三)
组件更新组件更新判断逻辑如下图:1. 合并state1.1. src/index.jsimport React from './react';import ReactDOM from './react-dom';class Counter extends React.Component { constructor(props) { super(props); ...原创 2020-04-27 21:53:17 · 527 阅读 · 0 评论 -
react15-源码演化-类组件和函数组件(二)
类组件和函数组件1. src/index.jsimport React from './react';import ReactDOM from './react-dom';class ClassCounter extends React.Component { constructor(props) { super(props); this.props = props;...原创 2020-04-27 21:44:10 · 231 阅读 · 0 评论 -
react15-源码演化-渲染原生组件(一)
渲染原生组件该文介绍前提,已经通过create-react-app初始化项目。由于React本身也是不断演化出来的产品,因此该文的源码跟官方不完全一致。意义在于核心思想、大部分核心写法,跟官方react16大体一致,便于理解分析React源码。该文是一个演化的过程,重点在于,如何一步步演化推导出react161. React.createElement1.1. src/index....原创 2020-04-12 00:04:25 · 414 阅读 · 0 评论