开始之前，先讲一下该文章能帮你解决哪些问题？facebook为什么要使用重构ReactReact Fiber是什么React Fiber的核心算法 - react是如何中断重启任务的react fiber部分源码简化版前言该文章涉及的源码部分基于React v17.0.2why React Fiber浏览器渲染过程从浏览器的运行机制谈起。大家都知道，浏览器是
......
316
0
0
2023-01-10
react16 版本之后引入了 fiber，整个架构层面的 调度、协调、diff 算法以及渲染等都与 fiber 密切相关。所以为了更好地讲解后面的内容，需要对 fiber 有个比较清晰的认知。本章将介绍以下内容：为什么需要 fiber fiber 节点结构中的属性 fiber 树是如何构建与更新的为什么需要 fiberLin Clark 在 React C
......
340
0
0
2023-01-10
MixinsReact Mixin通过将共享的方法包装成Mixins方法，然后注入各个组件来实现，官方已经不推荐使用，但仍然可以学习一下，了解为什么被遗弃。React MiXin只能通过React.createClass()来使用，如下：const mixinDefaultProps = {}
const ExampleComponent = React.
......
286
0
0
2023-01-08
复用是组件化开发体系的立命之本，可以说组件化的初衷就是为了复用性。但是组件化的复用方式也存在一定的问题，其中拆分粒度就是其中一个绕不开的话题，今天咱们就来讲一讲 React 当中的一个不太常用的 API：cloneElement，他如何帮组我们更好得进行组件拆分。假如我们有一个Layout组件，那么一般来说这个组件主要接收的就是children，把它放在主要
......
326
0
0
2023-01-08
Context提供了一种不需要手动地通过props来层层传递的方式来传递数据。正文在典型的React应用中，数据是通过props，自上而下地传递给子组件的。但是对于被大量组件使用的固定类型的数据（比如说，本地的语言环境，UI主题等）来说，这么做就显得十分的累赘和笨拙。Context提供了一种在组件之间（上下层级关系的组件）共享这种类型数据的方式。这种方式不需
......
272
0
0
2023-01-08
## 1.1、虚拟DOM常见问题：react virtual dom是什么？说一下diff算法？拿到一个问题，一般回答都是是什么？为什么？怎么办？那就按照这个思路来吧！what用 JavaScript 对象表示 DOM 信息和结构，当状态变更的时候，重新渲染这个 JavaScript 的对象结构。这个 JavaScript 对象称为virtual dom；w
......
321
0
0
2023-01-08
一、组件(1) 函数组件如果你想写的组件只包含一个 render 方法，并且不包含 state，那么使用函数组件就会更简单。我们不需要定义一个继承于 React.Component 的类，我们可以定义一个函数，这个函数接收 props 作为参数，然后返回需要渲染的元素。function Square(props) {
return (
<
......
291
0
0
2023-01-08
react因为组件化，使得组件间通信十分的重要。本文就来简单介绍一些常见的react组件间传递的内容。我将归纳为以下几种关系来详述:父组件与子组件之间，子组件与父组件之间，发布者与订阅者模式（context），兄弟组件间，redux也是一种组件管理的方法，但是redux状态管理的内容比较多，这里只做简单介绍，之后再另开一篇详述。父组件向子组件通信react的
......
518
0
0
2023-01-08
requestEventTime其实在React执行过程中，会有数不清的任务要去执行，但是他们会有一个优先级的判定，假如两个事件的优先级一样，那么React是怎么去判定他们两谁先执行呢？// packages/react-reconciler/src/ReactFiberWorkLoop.old.js
export function requestEven
......
404
0
0
2022-12-26
这一章我想跟大家探讨的是React的生命周期与事件系统。jsx的编译结果在这里插入图片描述因为前面也讲到jsx在v17中的编译结果，除了标签名，其他的挂在标签上的属性（比如class），事件（比如click事件），都是放在_jsxRuntime.jsx函数的第二参数上。表现为key:value的形式，这里我们就会产生几个问题。react是怎么知道函数体（事件
......
349
0
0
2022-12-26
同作为MVVM框架，React相比于Vue来讲，上手更需要JavaScript功底深厚一些，本系列将阅读React相关源码，从jsx -> VDom -> RDOM等一些列的过程，将会在本系列中一一讲解工欲善其事，必先利其器经过多年的发展，React已经更新了大版本16、17、18，本系列主要讲的是 version：17.0.2，在讲这个版本之前
......
371
0
0
2022-12-26
写在前面这是笔者在中秋无聊写着玩的，假期闲暇之余憋出来的帖子。麻雀虽小，但五脏俱全，涉及到的方方面面还是蛮全的。所以就设计了一个黛梦（demo）------ 打通了GraphQL的接口与前端交互的流程，并且将数据存入MYSQL，分享下React和GraphQL的使用，大致内容如下：GraphQL的增删改查接口设计与实现CRUD包mysql的使用React 和
......
341
0
0
2022-11-16
📢 大家好，我是小丞同学，一名大二的前端爱好者 📢 这篇文章是学习 React扩展部分的学习笔记 📢 非常感谢你的阅读，不对的地方欢迎指正 🙏 📢 愿你忠于自己，热爱生活引言学到这里 React 已经学的差不多了，接下来就学习一些 React 扩展内容，可以帮助我们更好的开发和理解，这部分的知识还有很多的东西可以探寻，比如：网红 React-Hook，就是我
......
345
0
0
2022-11-16
📢 大家好，我是小丞同学，一名大二的前端爱好者 📢 这篇文章是学习 React-Redux 数据共享 的学习笔记 📢 非常感谢你的阅读，不对的地方欢迎指正 🙏 📢 愿你忠于自己，热爱生活引言在写完了基本的 Redux 案例之后，我们可以尝试一些更实战性的操作，比如我们可以试试多组件间的状态传递，相互之间的交互如上动图所示，我们想要实现上面的案例，采用纯 Re
......
321
0
0
2022-11-11
本文讨论的React Router版本是V5以上的react-router和react-router-dom的区别为什么有时候我们看到如下的写法：写法1:import {Switch, Route, Router, browserHistory, Link} from 'react-router-dom';
写法2:import {Switch, Rout
......
469
0
0
2022-11-10