上一页 1 2 3 4 5 6 7 ··· 10 下一页
摘要: 首先我们来看看下面的代码 import "react" from "react"; const element = (<div> <div> <span>1</span> <span>2</span> <span>3</span> </div> <div>1</div> <div>2</div> < 阅读全文
posted @ 2022-12-12 10:47 夏天的味道123 阅读(17) 评论(0) 推荐(0)
摘要: Mixins React Mixin通过将共享的方法包装成Mixins方法,然后注入各个组件来实现,官方已经不推荐使用,但仍然可以学习一下,了解为什么被遗弃。 React MiXin只能通过React.createClass()来使用,如下: const mixinDefaultProps = {} 阅读全文
posted @ 2022-12-07 12:15 夏天的味道123 阅读(50) 评论(0) 推荐(0)
摘要: 复用是组件化开发体系的立命之本,可以说组件化的初衷就是为了复用性。但是组件化的复用方式也存在一定的问题,其中拆分粒度就是其中一个绕不开的话题,今天咱们就来讲一讲 React 当中的一个不太常用的 API:cloneElement,他如何帮组我们更好得进行组件拆分。 假如我们有一个Layout组件,那 阅读全文
posted @ 2022-12-07 12:14 夏天的味道123 阅读(34) 评论(0) 推荐(0)
摘要: Context提供了一种不需要手动地通过props来层层传递的方式来传递数据。 正文 在典型的React应用中,数据是通过props,自上而下地传递给子组件的。但是对于被大量组件使用的固定类型的数据(比如说,本地的语言环境,UI主题等)来说,这么做就显得十分的累赘和笨拙。Context提供了一种在组 阅读全文
posted @ 2022-12-07 12:13 夏天的味道123 阅读(106) 评论(0) 推荐(0)
摘要: 这一章就来讲讲React在协调阶段的beginWork里面主要做的事情 -- dom diff。 本文主要讲的是React17.0.2版本的diff,在此我也画了一个简单的流程图: reconcileChildren dom diff的入口函数就是reconcileChildren,那么他的源码如下 阅读全文
posted @ 2022-11-18 11:34 夏天的味道123 阅读(35) 评论(0) 推荐(0)
摘要: 在 React 中,对于每一次由状态改变导致页面视图的改变,都会经历两个阶段:render 阶段、commit 阶段。 只有 class 组件才有生命周期,因为 class 组件会创建对应的实例,而函数组件不会。组件实例从被创建到被销毁的过程称为组件的生命周期。 由 class 组件创建的实例具有生 阅读全文
posted @ 2022-11-18 11:33 夏天的味道123 阅读(84) 评论(0) 推荐(0)
摘要: 本文概述了5种现代高级React模式,包括集成代码、优点和缺点,以及在公共库中的具体用法。 像每个React开发者一样,你可能已经问过自己以下问题之一 我如何建立一个可重复使用的组件以适应不同的使用情况? 我如何建立一个具有简单API的组件,使其易于使用? 我如何建立一个在用户界面和功能方面可扩展的 阅读全文
posted @ 2022-11-18 11:33 夏天的味道123 阅读(104) 评论(0) 推荐(0)
摘要: 一、父组件通过 Ref 调用子组件中的方法 这里同时演示使用函数组件和类组件的父子组件如何编写 子组件 React.forwardRef React.useImperativeHandle public、private、protected /** * 声明一个 function component 阅读全文
posted @ 2022-11-16 09:32 夏天的味道123 阅读(30) 评论(0) 推荐(0)
摘要: 前言 React 为我们提供了一套虚拟的事件系统,这套虚拟事件系统是如何工作的,笔者对源码做了一次梳理,整理了下面的文档供大家参考。 在 React事件介绍 中介绍了合成事件对象以及为什么提供合成事件对象,主要原因是因为 React 想实现一个全浏览器的框架, 为了实现这种目标就需要提供全浏览器一致 阅读全文
posted @ 2022-11-16 09:30 夏天的味道123 阅读(103) 评论(0) 推荐(0)
摘要: 1. JSX与虚拟DOM 我们从React官方文档开头最基本的一段Hello World代码入手: ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); 这段代码的意思是通过 ReactDOM.rend 阅读全文
posted @ 2022-11-16 09:26 夏天的味道123 阅读(20) 评论(0) 推荐(0)
上一页 1 2 3 4 5 6 7 ··· 10 下一页