React

Context 作用：给整个组件树共享全局的数据 最适合的场景：杂乱无章的组件都需要同一些数据 如果单纯为了不层层传递属性的话， Context  是不合适的，因为 Co…

高阶组件 High Order Component HOC 是一种高级的设计模式 HOC 是一个函数，接收一个组件参数，返回一个新组件 普通组件返回的是 UI，HOC 返回的是一个…

Refs 允许我们访问真实 DOM 一般的，React 数据流是通过 props 来实现父子组件的交互 Refs 允许我们用于强制修改子组件 // 输入框焦点class&…

JSX JSX 其实是 React.createElelment 函数调用的语法糖 JSX 会将代码编译成 React.createElelment 调用形式 React.crea…

TodoList ❝ 本系列文章会展示如何使用 React 构建一个简单的 todo_list 项目。由于我们还没有学习 redux ，所以 纯 React 来管理数据，以此来巩固…

模拟获取数据接口 export function getTodoListData() {  return new&nbs…

TodoList 真正的挑战要开始了~~~ 这里我采用自顶向下的叙述方法，来描述组件的结构，大家可以先按照顺序依次阅读，最后再回头完整的看一遍，就能明白其中的设计方法啦~~ App…

现代前端框架都是基于组件的方式来开发页面。按照逻辑关系把页面划分为不同的组件，分别开发不同的组件，然后把它们一层层组装起来，把根组件传入 ReactDOM.render 或者 vu…

前面两篇文章，我们实现了 vdom 的渲染和 jsx 的编译，实现了 function 和 class 组件，这篇来实现 patch 更新。 能够做 vdom 的渲染和更新，支持组…

上篇文章我们实现了 vdom 的渲染，这是前端框架的基础。但手写 vdom 太麻烦，我们又支持了 jsx，用它来写页面更简洁。 jsx 不是直接编译成 vdom 的，而是生成 re…

作为前端工程师，前端框架几乎每天都要用到，需要好好掌握，而对某项技术的掌握程度可以根据是否能实现一个来判断。手写一个前端框架对更好的掌握它是很有帮助的事情。 现代前端框架经过多年的…

React 是实现了组件的前端框架，它支持 class 和 function 两种形式的组件。 class 组件是通过继承模版类（Component、PureComponent）的…

React 16 之前和之后最大的区别就是 16 引入了 fiber，又基于 fiber 实现了 hooks。整天都提 fiber，那 fiber 到底是啥？它和 vdom 是什么…

context 是 React 提供的特性，可以实现任意层级组件之间的数据传递。 可能大家用过 context，但是不知道它是怎么实现的。 本文就从源码层面来讲下 cotnext …

useEffect 是常用的 hook，它支持两个参数，第一个参数是回调函数，第二个参数是依赖。 当第二个参数为 null 或 undefined 的时候，回调函数每次 rende…

React 的 hooks 是在 fiber 之后出现的特性，所以很多人误以为 hooks 是必须依赖 fiber 才能实现的，其实并不是，它们俩没啥必然联系。 现在，不止 rea…