11 2022 档案
摘要：这一章就来讲讲React在协调阶段的beginWork里面主要做的事情 -- dom diff。 本文主要讲的是React17.0.2版本的diff，在此我也画了一个简单的流程图： reconcileChildren dom diff的入口函数就是reconcileChildren，那么他的源码如下
阅读全文
摘要：在 React 中，对于每一次由状态改变导致页面视图的改变，都会经历两个阶段：render 阶段、commit 阶段。 只有 class 组件才有生命周期，因为 class 组件会创建对应的实例，而函数组件不会。组件实例从被创建到被销毁的过程称为组件的生命周期。 由 class 组件创建的实例具有生
阅读全文
摘要：本文概述了5种现代高级React模式，包括集成代码、优点和缺点，以及在公共库中的具体用法。 像每个React开发者一样，你可能已经问过自己以下问题之一 我如何建立一个可重复使用的组件以适应不同的使用情况？ 我如何建立一个具有简单API的组件，使其易于使用？ 我如何建立一个在用户界面和功能方面可扩展的
阅读全文
摘要：一、父组件通过 Ref 调用子组件中的方法 这里同时演示使用函数组件和类组件的父子组件如何编写 子组件 React.forwardRef React.useImperativeHandle public、private、protected /** * 声明一个 function component
阅读全文
摘要：前言 React 为我们提供了一套虚拟的事件系统，这套虚拟事件系统是如何工作的，笔者对源码做了一次梳理，整理了下面的文档供大家参考。 在 React事件介绍 中介绍了合成事件对象以及为什么提供合成事件对象，主要原因是因为 React 想实现一个全浏览器的框架， 为了实现这种目标就需要提供全浏览器一致
阅读全文
摘要：1. JSX与虚拟DOM 我们从React官方文档开头最基本的一段Hello World代码入手: ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); 这段代码的意思是通过 ReactDOM.rend
阅读全文
摘要：在单页面应用如日中天发展的过程中，备受关注的少了前端路由。 而且还经常会被xxx面试官问到，什么是前端路由，它的原理的是什么，它是怎么实现，跳转不刷新页面的... 一大堆为什么，问你头都大， 前言 今天主要讲的是： 原生js实现hashRouter 原生js实现historyRouter react
阅读全文
摘要：前言 阅读本文章需要对 React hooks 中 useState 和 useEffect 有基础的了解。我的这篇文章内有大致介绍 在 React 项目中全量使用 Hooks。 useCallback useCallback 的作用 官方文档： Pass an inline callback an
阅读全文
摘要：Transition 使用姿势 Transition 是 react18 引入的新概念，用来区分紧急和非紧急的更新。 紧急的更新，指的是一些直接的用户交互，如输入、点击等； 非紧急的更新，指的是 UI 界面从一个样子过渡到另一个样子； react 官方的 demo 如下： import {start
阅读全文
摘要：写在前面的小结 每一个 hook 函数都有对应的 hook 对象保存状态信息 useContext是唯一一个不需要添加到 hook 链表的 hook 函数 只有 useEffect、useLayoutEffect 以及 useImperativeHandle 这三个 hook 具有副作用，在 ren
阅读全文
摘要：Redux的作用是什么 Redux的作用在于实现状态传递、状态管理。在这里你可能会说了，如果是状态传递，那我props的传递不也是可以达到这样的效果吗？context上下文方案不也是可以达到这样的效果吗？没错，是这样的，但是上述的两种方案是有局限性的。 props方案只适用于父子组件传递状态。 co
阅读全文
摘要：一、props的介绍 当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件，这个对象称之为“props”。 函数声明的组件，会接受一个props形参，获取属性传递的参数 function ComponentA(props) { return <div>我是组件B:{pr
阅读全文
摘要：首先我们来看看下面的代码 import "react" from "react"; const element = (<div> <div> <span>1</span> <span>2</span> <span>3</span> </div> <div>1</div> <div>2</div> <
阅读全文
摘要：一、Redux是什么？ 众所周知，Redux最早运用于React框架中，是一个全局状态管理器。Redux解决了在开发过程中数据无限层层传递而引发的一系列问题，因此我们有必要来了解一下Redux到底是如何实现的？ 二、Redux的核心思想？ Redux主要分为几个部分：dispatch、reducer
阅读全文
摘要：前言 这篇文章循序渐进地介绍实现以下几个概念，遵循本篇文章基本就能搞懂为啥需要fiber，为啥需要commit和phases、reconciliation阶段等原理。本篇文章又不完全和原文一致，这里会加入我自己的一些思考，比如经过performUnitOfWork处理后fiber tree和elem
阅读全文
摘要：Context提供了一种不需要手动地通过props来层层传递的方式来传递数据。 正文 在典型的React应用中，数据是通过props，自上而下地传递给子组件的。但是对于被大量组件使用的固定类型的数据（比如说，本地的语言环境，UI主题等）来说，这么做就显得十分的累赘和笨拙。Context提供了一种在组
阅读全文
摘要：render prop是一个技术概念。它指的是使用值为function类型的prop来实现React component之间的代码共享。 如果一个组件有一个render属性，并且这个render属性的值为一个返回React element的函数，并且在组件内部的渲染逻辑是通过调用这个函数来完成的。那
阅读全文
摘要：Suspense 基本应用 Suspense 目前在 react 中一般配合 lazy 使用，当有一些组件需要动态加载(例如各种插件)时可以利用 lazy 方法来完成。其中 lazy 接受类型为 Promise<() => {default: ReactComponet}> 的参数，并将其包装为 r
阅读全文
摘要：本文概述了5种现代高级React模式，包括集成代码、优点和缺点，以及在公共库中的具体用法。 像每个React开发者一样，你可能已经问过自己以下问题之一 我如何建立一个可重复使用的组件以适应不同的使用情况？ 我如何建立一个具有简单API的组件，使其易于使用？ 我如何建立一个在用户界面和功能方面可扩展的
阅读全文
摘要：Mixins React Mixin通过将共享的方法包装成Mixins方法，然后注入各个组件来实现，官方已经不推荐使用，但仍然可以学习一下，了解为什么被遗弃。 React MiXin只能通过React.createClass()来使用，如下： const mixinDefaultProps = {}
阅读全文
摘要：复用是组件化开发体系的立命之本，可以说组件化的初衷就是为了复用性。但是组件化的复用方式也存在一定的问题，其中拆分粒度就是其中一个绕不开的话题，今天咱们就来讲一讲 React 当中的一个不太常用的 API：cloneElement，他如何帮组我们更好得进行组件拆分。 假如我们有一个Layout组件，那
阅读全文
摘要：1. JSX与虚拟DOM 我们从React官方文档开头最基本的一段Hello World代码入手: ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); 这段代码的意思是通过 ReactDOM.rend
阅读全文
摘要：这一章就来讲讲React在协调阶段的beginWork里面主要做的事情 -- dom diff。 本文主要讲的是React17.0.2版本的diff，在此我也画了一个简单的流程图： reconcileChildren dom diff的入口函数就是reconcileChildren，那么他的源码如下
阅读全文
摘要：在 React 中，对于每一次由状态改变导致页面视图的改变，都会经历两个阶段：render 阶段、commit 阶段。 只有 class 组件才有生命周期，因为 class 组件会创建对应的实例，而函数组件不会。组件实例从被创建到被销毁的过程称为组件的生命周期。 由 class 组件创建的实例具有生
阅读全文
摘要：Transition 使用姿势 Transition 是 react18 引入的新概念，用来区分紧急和非紧急的更新。 紧急的更新，指的是一些直接的用户交互，如输入、点击等； 非紧急的更新，指的是 UI 界面从一个样子过渡到另一个样子； react 官方的 demo 如下： import {start
阅读全文
摘要：一、父组件通过 Ref 调用子组件中的方法 这里同时演示使用函数组件和类组件的父子组件如何编写 子组件 React.forwardRef React.useImperativeHandle public、private、protected /** * 声明一个 function component
阅读全文
摘要：前言 React 为我们提供了一套虚拟的事件系统，这套虚拟事件系统是如何工作的，笔者对源码做了一次梳理，整理了下面的文档供大家参考。 在 React事件介绍 中介绍了合成事件对象以及为什么提供合成事件对象，主要原因是因为 React 想实现一个全浏览器的框架， 为了实现这种目标就需要提供全浏览器一致
阅读全文
摘要：一、props的介绍 当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件，这个对象称之为“props”。 函数声明的组件，会接受一个props形参，获取属性传递的参数 function ComponentA(props) { return <div>我是组件B:{pr
阅读全文
摘要：在单页面应用如日中天发展的过程中，备受关注的少了前端路由。 而且还经常会被xxx面试官问到，什么是前端路由，它的原理的是什么，它是怎么实现，跳转不刷新页面的... 一大堆为什么，问你头都大 前言 今天主要讲的是： 原生js实现hashRouter 原生js实现historyRouter react-
阅读全文
摘要：前言 阅读本文章需要对 React hooks 中 useState 和 useEffect 有基础的了解。我的这篇文章内有大致介绍 在 React 项目中全量使用 Hooks。 useCallback useCallback 的作用 官方文档： Pass an inline callback an
阅读全文
