React高级
文章平均质量分 89
lxcy_intellect
专注前端技术栈
展开
-
一文让你不再困惑setState之原理剖析和代码实现(下)
文章目录setState 原理剖析UpdaterforeUpdateupdateQueue总结我们在面试的过程中经常会被问到,我们通过 setState 更改状态后发生了什么?状态是如何变更的?本期将从以下几个方面来深入了解 setState的工作原理。原理剖析实现异步队列 updateQueue、Updater、ComponentsetState 原理剖析我们通过 class Cmp extends Component 来定义一个class 组件,在源码中,Component的实现很简单,除原创 2022-03-21 13:58:37 · 1334 阅读 · 0 评论 -
一文让你不再困惑setState之getState(上)
文章目录setState 的特点getState() 获取最新状态值在面试中我们通常会被问到有关 setState 相关的问题。接下来我们先看几个示例,然后通过 模拟实现 setState的行为来更加深刻的理解实例得出的结论。setState 的特点批量执行:多key一次执行,对同一个key多次操作会合并,会执行最后一次可能是异步的(如在生命周期、react事件中)在定时器和原生事件中,它是同步的;由于 setState 可能是异步的,如果要立即获取到最新的值,有三种方式:传函数给se原创 2022-03-21 00:31:24 · 2353 阅读 · 2 评论 -
React 之 简易实现 Fiber架构
文章目录fiber架构是什么?它解决了什么问题?fiber 的核心思想,实现 fiber 我们需要做到什么?如何做?Fiber reconcileCommit 阶段实现useState管理状态更新此篇文章是在学习一步一步实现fiber架构的同时,从另外一个由总到分的角度来总结fiber架构的实现思路。文章末尾有一些学习参考文章可以借鉴。fiber架构是什么?它解决了什么问题?当我们项目过于复杂,渲染树过于庞大的时候,那么我们的递归渲染会耗时很长,而且很难被中断,fiber 的主要原理就是让我们在 di原创 2022-03-20 22:00:19 · 1453 阅读 · 0 评论 -
通过实现 createElement、Component 和 render 深入理解React 原理
文章目录createElementrender(vdom, container)Component文章主要是通过官网和源码学习之后,对 React 核心 API 加入了自己的理解和总结。完整代码请参考 ,注意代码中将react 版本锁定在17.0.0 之前。createElement简单粗暴,我们先来看下面这段代码:import React from 'react'import ReactDOM from 'react-dom'function HelloMessage(props) {原创 2022-03-19 00:19:40 · 674 阅读 · 0 评论 -
手写 React-Router(Hook版)
文章目录Hook 实现router组件思想手写 BrowserRouter手写 Link手写 Route参考文档:react-routergit react-routerHook 实现router组件思想根据运行环境安装react-router-dom,它依赖react-router,安装会自动安装react-router。react-router 中奉行一切皆组件的思想。路...原创 2020-03-20 18:18:59 · 561 阅读 · 0 评论 -
手写React-Redux(Hook实现)
文章目录React-Redux API实现手写 Provider手写 connect ( Hook实现 )mapDispatchToProps 的两种传参处理React-Redux API实现react-redux提供了两个apiProviderconnectProvide主要是将store分发传递下去,而我们在组件中需要去消费store时,可以使用connect将状态和派发函数映射...原创 2020-03-18 17:54:55 · 552 阅读 · 0 评论 -
手写Redux
文章目录Redux核心API的实现手写 createStore手写 applyMiddleware手写 thunk 实现下一篇手写React-ReduxRedux核心API的实现主要实现下 redux中核心APIcreateStoreapplyMiddleware以及异步中间件thunk手写 createStore环境搭建store 中将 import 的 redux 改...原创 2020-03-18 02:41:22 · 144 阅读 · 0 评论 -
Redux & React-Redux必知必会
文章目录Redux 使用为什么要在React中使用Redux?Redux工作原理Reducer是啥?Redux基本使用总结React-Redux使用安装react-redux基本使用下一篇:手写 Redux & React-Reduxreduxreact-reduxRedux 使用为什么要在React中使用Redux?我们知道,react的核心是组件,而组件中有两个重要的属性...原创 2020-03-17 23:25:09 · 124 阅读 · 0 评论 -
Hook必知必会
文章目录目录Hook解决了什么?Hook的基本使用useState 和 useEffectHook的使用规则自定义Hook目录Hook解决了什么?React没有提供将可复用性行为“附加”到组件的途径。(例如,把组件连接到 store)问题:组件之间复用状态逻辑很难在hook出现之前,组件复用一般采用Render Props 和 高阶组件HOC,这类方案需要重新组织你的组件结构,让代码...原创 2020-03-16 11:16:04 · 778 阅读 · 0 评论 -
一文搞懂React的ref
文章目录目录refs转发ref使用中的问题方案一:React.forwardRef实现自动转发方案二:回调Refs方案三:useImperativeHandle创建ref目录refs转发Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧,Ref 转发使组件可以像暴露自己的 ref 一样暴露子组件的 ref。下面是几个适合使用 refs 的情况:管理焦点,文本选择或媒体播...原创 2020-03-15 12:39:35 · 258 阅读 · 0 评论