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