React
文章平均质量分 96
用于构建 Web 和原生交互界面的库
奋飛
乐观、勇气、专注、果断、好奇、公正、慎思、真诚、追求极致追求完美、诚信!独立撰写了多个前端专题模块,访问量达百万级。多次负责组织大数据可视化前端架构平台开发工作。对前端新技术、新潮流具有很强的敏锐力和洞察力!
展开
-
Reducer:让代码更灵活&简洁
对于拥有许多状态更新逻辑的组件来说,过于分散的事件处理程序可能会令人不知所措。对于这种情况,可以将组件的所有状态更新逻辑整合到一个外部 Reducer 函数中。原创 2024-04-29 14:47:31 · 776 阅读 · 0 评论 -
Fiber:React 的性能保障
React Fiber 是 Virtual DOM 的底层实现,它提供了一种新的调度机制来处理 Virtual DOM 的更新。Fiber 引擎使得 React 能够更细粒度地控制渲染过程。1. Virtual DOM:主要是一种优化技术,用于减少实际 DOM 操作的次数及范围,提高性能;2. Fiber:是一种新的协调引擎,旨在改善 React 的渲染性能、实现更好的并发控制,并支持增量渲染,从而提高 React 的响应能力。原创 2024-04-22 16:03:34 · 590 阅读 · 1 评论 -
Hooks:尽享React特性 ,重塑开发体验
React 16.8 版本引入了 Hooks ,可以在不使用 Class 的情况下使用 React 特性。Hooks 允许从函数组件 “hook into” React 状态和生命周期特性。Hooks 让我们根据代码所做的,而不是生命周期方法名称来分割代码。React 组件一直更像是函数,而 Hooks 则拥抱了函数。原创 2024-04-11 11:21:12 · 882 阅读 · 0 评论 -
对比:React 还是 Vue
随着 Vue、React 的演进,其各自框架的基本形态和功能已经很完备,最根本差异点逐渐演变成了框架开发者各自的理念差异,不同的理念让框架有了各自的设计模式和最佳实践。然而,对于使用者来说,搞懂其设计模式、沉淀其最佳实践、了解其基本原理,是掌握一门框架的捷径,也是衡量对其熟悉程度的标尺。Vue 更贴近传统前端开发方式,更符合人的直觉,更易上手更简单;React 让函数变得更加复杂,使用者有更大的控制权,更加灵活,从而优雅。原创 2024-04-01 20:22:32 · 1144 阅读 · 2 评论 -
Effect:由渲染本身引起的副作用
Effect 允许指定由渲染本身,而不是特定事件引起的副作用。React 组件中的两种逻辑类型:① 渲染逻辑代码 位于组件的顶层,接收 props 和 state,进行转换,返回屏幕上看到的 JSX,只计算不做其他任何事情;② 事件处理程序 嵌套在组件内部的函数,由特定的用户操作(如按钮点击)引起的”副作用“(改变了程序的状态)。实际开发过程中,还会遇到当进入页面时触发一些动作(如播放视频、日志发送、连接到聊天服务器等)。其①不能在渲染过程中发生,②也没有一个特定的事件(比如点击。原创 2024-03-20 16:57:17 · 622 阅读 · 0 评论 -
脱围:使用 ref 保存值及操作DOM
ref 是一种脱围机制,用于保留不用于渲染的值。同时,ref 是一个普通的 JavaScript 对象,具有一个名为 `current` 的属性,可以对其进行读取或设置。与 state 不同,设置 ref 的 `current` 值不会触发重新渲染**。**不要在渲染过程中读取或写入 `ref.current`。这使组件难以预测。原创 2024-03-11 16:10:07 · 867 阅读 · 0 评论 -
续篇:展开聊下 state 与 渲染树中位置的关系
状态与渲染树中的位置相关:相同位置的相同组件会使得 state 被保留下来 ;相同位置的不同组件会使 state 重置 。只要一个组件还被渲染在 UI 树的相同位置,React 就会保留它的 state。如果它被移除,或者一个不同的组件被渲染在相同的位置,那么 React 就会丢掉它的 state。原创 2024-03-11 11:35:53 · 930 阅读 · 0 评论 -
总结:React 中的 state 状态
`props`:只读,父组件通过 `props` 传递给子组件其所需要的状态;子组件内部不能直接修改`props`,只能在父组件中修改。`state`:可变,是组件内部维护的一组用于反映组件UI变化的状态集合。React 会将更新函数依次加入队列,以便在事件处理函数中的所有其他代码运行后进行处理。在下一次渲染期间,React 会遍历队列并给你更新之后的最终 state。原创 2024-03-04 18:18:03 · 963 阅读 · 0 评论 -
探讨:围绕 props 阐述 React 通信
React 组件使用props来互相通信。每个父组件都可以提供 props 给它的子组件,从而将一些信息传递给它。当组件中的重要信息是由 `props` 而不是其自身状态驱动时,就可以认为该组件是“受控组件”;受控组件具有最大的灵活性,但它们需要父组件使用 `props` 对其进行配置。当组件中的重要信息是由其自身状态 `state`驱动时,就可以认为该组件是“非受控组件”;非受控组件通常很简单,因为它们不需要太多配置。原创 2024-02-28 20:10:04 · 951 阅读 · 0 评论 -
开篇:通过 state 阐述 React 渲染
React中,有两种原因会导致组件的渲染: ① 组件的初次渲染。② 组件(或者其祖先之一)的状态发生了改变。State setter 函数更新变量(状态发生改变)并触发 React 再次渲染组件。原创 2024-02-21 20:11:53 · 1019 阅读 · 0 评论