随笔分类 -  React

摘要:ReactPortals传送门 React Portals提供了一种将子节点渲染到父组件以外的DOM节点的解决方案,即允许将JSX作为children渲染至DOM的不同部分,最常见用例是子组件需要从视觉上脱离父容器,例如对话框、浮动工具栏、提示信息等。 描述 <div> <SomeComponent 阅读全文
posted @ 2023-09-29 10:13 WindRunnerMax 阅读(355) 评论(0) 推荐(1) 编辑
摘要:React闭包陷阱 React Hooks是React 16.8引入的一个新特性,其出现让React的函数组件也能够拥有状态和生命周期方法,其优势在于可以让我们在不编写类组件的情况下,更细粒度地复用状态逻辑和副作用代码,但是同时也带来了额外的心智负担,闭包陷阱就是其中之一。 闭包 从React闭包陷 阅读全文
posted @ 2023-05-21 10:11 WindRunnerMax 阅读(434) 评论(0) 推荐(0) 编辑
摘要:Hooks与事件绑定 在React中,我们经常需要为组件添加事件处理函数,例如处理表单提交、处理点击事件等。通常情况下,我们需要在类组件中使用this关键字来绑定事件处理函数的上下文,以便在函数中使用组件的实例属性和方法。React Hooks是React 16.8引入的一个新特性,其出现让Reac 阅读全文
posted @ 2023-04-16 10:02 WindRunnerMax 阅读(455) 评论(0) 推荐(1) 编辑
摘要:Hooks与普通函数的区别 在这里的Hooks具体指的是自定义Hooks,自定义的Hooks与我们定义的普通函数类似,都可以封装逻辑,以实现逻辑的复用。Hooks实际上是一种特殊的函数,而由于Hooks的特殊实现,他们之间也存在着一定的区别。 描述 在我开始学习React Hooks的时候,我就比较 阅读全文
posted @ 2022-10-16 11:47 WindRunnerMax 阅读(642) 评论(0) 推荐(0) 编辑
摘要:Context与Reducer Context是React提供的一种跨组件的通信方案,useContext与useReducer是在React 16.8之后提供的Hooks API,我们可以通过useContext与useReducer来完成全局状态管理例如Redux的轻量级替代方案。 useCon 阅读全文
posted @ 2022-09-17 21:00 WindRunnerMax 阅读(261) 评论(0) 推荐(0) 编辑
摘要:Mobx与Redux的异同 Mobx与Redux都是用来管理JavaScript应用的状态的解决方案,用以提供在某个地方保存状态、修改状态和更新状态,使我们的应用在状态与组件上解耦,我们可以从一个地方获得状态,在另一个地方修改,在其他地方得到他们更新后的状态。他们都遵循单一数据源的原则,这让我们更容 阅读全文
posted @ 2022-05-08 20:45 WindRunnerMax 阅读(287) 评论(0) 推荐(0) 编辑
摘要:手写useState与useEffect useState与useEffect是驱动React hooks运行的基础,useState用于管理状态,useEffect用以处理副作用,通过手写简单的useState与useEffect来理解其运行原理。 useState 一个简单的useState的使 阅读全文
posted @ 2022-04-30 20:50 WindRunnerMax 阅读(909) 评论(0) 推荐(0) 编辑
摘要:setState同步异步场景 React通过this.state来访问state,通过this.setState()方法来更新state,当this.setState()方法被调用的时候,React会重新调用render方法来重新渲染UI。相比较于在使用Hooks完成组件下所需要的心智负担,setS 阅读全文
posted @ 2022-03-21 10:55 WindRunnerMax 阅读(442) 评论(0) 推荐(0) 编辑
摘要:useMemo与useCallback useMemo和useCallback都可缓存函数的引用或值,从更细的角度来说useMemo则返回一个缓存的值,useCallback是返回一个缓存函数的引用。 useMemo useMemo的TS定义可以看出,范型T在useMemo中是一个返回的值类型。 t 阅读全文
posted @ 2022-02-12 10:57 WindRunnerMax 阅读(462) 评论(0) 推荐(0) 编辑
摘要:useEffect与useLayoutEffect useEffect与useLayoutEffect可以统称为Effect Hook,Effect Hook可以在函数组件中执行副作用操作,副作用是指函数或者表达式的行为依赖于外部环境,或者在这里可以理解为修改了某状态会对其他的状态造成影响,这个影响 阅读全文
posted @ 2022-01-24 18:44 WindRunnerMax 阅读(371) 评论(0) 推荐(0) 编辑
摘要:Hooks中的useState React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中,实际上在任何应用中,数据都是必不可少的,我们需要直接的改变页面上一块的区域来使得视图的刷新,或者间接地改变其他地方的数据,在React中就使用props和state两 阅读全文
posted @ 2021-12-21 20:58 WindRunnerMax 阅读(618) 评论(0) 推荐(1) 编辑
摘要:React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DOM结构进行重绘与回流,而diff算法能够使得操作过程中只更新修改的那部分DOM结构而不更新整个DOM 阅读全文
posted @ 2021-05-18 16:09 WindRunnerMax 阅读(757) 评论(0) 推荐(1) 编辑
摘要:React组件复用的方式 现前端的工程化越发重要,虽然使用Ctrl+C与Ctrl+V同样能够完成需求,但是一旦面临修改那就是一项庞大的任务,于是减少代码的拷贝,增加封装复用能力,实现可维护、可复用的代码就变得尤为重要,在React中组件是代码复用的主要单元,基于组合的组件复用机制相当优雅,而对于更细 阅读全文
posted @ 2021-02-23 22:28 WindRunnerMax 阅读(1541) 评论(0) 推荐(1) 编辑
摘要:React中组件间通信的方式 React中组件间通信包括父子组件、兄弟组件、隔代组件、非嵌套组件之间通信。 Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组件的通信,所谓单向数据流,就是数据只能通过props由父组件流向子组件,而子组件并不能通过修改pro 阅读全文
posted @ 2021-01-30 22:22 WindRunnerMax 阅读(1521) 评论(0) 推荐(1) 编辑
摘要:ReactRouter的实现 ReactRouter是React的核心组件,主要是作为React的路由管理器,保持UI与URL同步,其拥有简单的API与强大的功能例如代码缓冲加载、动态路由匹配、以及建立正确的位置过渡处理等。 描述 React Router是建立在history对象之上的,简而言之一 阅读全文
posted @ 2021-01-24 21:10 WindRunnerMax 阅读(372) 评论(1) 推荐(1) 编辑
摘要:React中的合成事件 React自己实现了一套高效的事件注册、存储、分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大程度地解决了IE等浏览器的不兼容问题。 描述 React的合成事件SyntheticEvent实际上就是React自己在内部实现的一套事件处 阅读全文
posted @ 2021-01-20 23:00 WindRunnerMax 阅读(1589) 评论(0) 推荐(1) 编辑
摘要:React中refs的理解 Refs提供了一种方式,允许我们访问DOM节点或在render方法中创建的React元素。 描述 在典型的React数据流中,props是父组件与子组件交互的唯一方式,要修改一个子组件,你需要使用新的props来重新渲染它,但是在某些情况下,你需要在典型数据流之外强制修改 阅读全文
posted @ 2021-01-18 20:27 WindRunnerMax 阅读(566) 评论(0) 推荐(0) 编辑
摘要:React中的高阶组件 高阶组件HOC即Higher Order Component是React中用于复用组件逻辑的一种高级技巧,HOC自身不是React API的一部分,它是一种基于React的组合特性而形成的设计模式。 描述 高阶组件从名字上就透漏出高级的气息,实际上这个概念应该是源自于Java 阅读全文
posted @ 2021-01-15 14:21 WindRunnerMax 阅读(847) 评论(0) 推荐(0) 编辑
摘要:React中的纯组件 React提供了一种基于浅比较模式来确定是否应该重新渲染组件的类React.PureComponent,通常只需要继承React.PureComponent就可以定义一个纯组件。React.PureComponent与React.Component很相似,两者的区别在于Reac 阅读全文
posted @ 2021-01-13 19:45 WindRunnerMax 阅读(583) 评论(0) 推荐(0) 编辑
摘要:受控组件和非受控组件 React的受控组件与非受控组件的概念是相对于表单而言的,在React中表单元素通常会持有一下内部的state,因此它的工作方式与其他HTML元素不一样,而获取表单元素内部state的实现方式的不同,就产生了受控组件和非受控组件。 受控组件 在HTML的表单元素中,它们通常自己 阅读全文
posted @ 2021-01-09 11:41 WindRunnerMax 阅读(1010) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示