yuan_me_da的博客

文章目录setState 原理剖析UpdaterforeUpdateupdateQueue总结 我们在面试的过程中经常会被问到，我们通过 setState 更改状态后发生了什么？状态是如何变更的？本期将从以下几个方面来深入了解 setState的工作原理。 原理剖析 实现异步队列 updateQueue、Updater、Component setState 原理剖析 我们通过 class Cmp extends Component 来定义一个class 组件，在源码中，Component的实现很简单，除

文章目录setState 的特点getState() 获取最新状态值 在面试中我们通常会被问到有关 setState 相关的问题。 接下来我们先看几个示例，然后通过 模拟实现 setState的行为来更加深刻的理解实例得出的结论。 setState 的特点 批量执行：多key一次执行，对同一个key多次操作会合并，会执行最后一次 可能是异步的（如在生命周期、react事件中） 在定时器和原生事件中，它是同步的； 由于 setState 可能是异步的，如果要立即获取到最新的值，有三种方式： 传函数给se

文章目录fiber架构是什么？它解决了什么问题？fiber 的核心思想，实现 fiber 我们需要做到什么？如何做？Fiber reconcileCommit 阶段实现useState管理状态更新 此篇文章是在学习一步一步实现fiber架构的同时，从另外一个由总到分的角度来总结fiber架构的实现思路。文章末尾有一些学习参考文章可以借鉴。 fiber架构是什么？它解决了什么问题？ 当我们项目过于复杂，渲染树过于庞大的时候，那么我们的递归渲染会耗时很长，而且很难被中断，fiber 的主要原理就是让我们在 di

文章目录createElementrender(vdom, container)Component 文章主要是通过官网和源码学习之后，对 React 核心 API 加入了自己的理解和总结。完整代码请参考 ,注意代码中将react 版本锁定在17.0.0 之前。 createElement 简单粗暴，我们先来看下面这段代码： import React from 'react' import ReactDOM from 'react-dom' function HelloMessage(props) {

文章目录Hook 实现router组件思想手写 BrowserRouter手写 Link手写 Route 参考文档： react-router git react-router Hook 实现router 组件思想 根据运行环境安装react-router-dom，它依赖react-router，安装会自动安装react-router。 react-router 中奉行一切皆组件的思想。 路...

文章目录React-Redux API实现手写 Provider手写 connect ( Hook实现 )mapDispatchToProps 的两种传参处理 React-Redux API实现 react-redux提供了两个api Provider connect Provide主要是将store分发传递下去，而我们在组件中需要去消费store时，可以使用connect将状态和派发函数映射...

文章目录Redux核心API的实现手写 createStore手写 applyMiddleware手写 thunk 实现下一篇手写React-Redux Redux核心API的实现 主要实现下 redux中核心API createStore applyMiddleware 以及异步中间件thunk 手写 createStore 环境搭建 store 中将 import 的 redux 改...

文章目录Redux 使用为什么要在React中使用Redux？Redux工作原理Reducer是啥？Redux基本使用总结React-Redux使用安装react-redux基本使用下一篇：手写 Redux & React-Redux redux react-redux Redux 使用 为什么要在React中使用Redux？ 我们知道，react的核心是组件，而组件中有两个重要的属性...

文章目录目录Hook解决了什么？Hook的基本使用useState 和 useEffectHook的使用规则自定义Hook 目录 Hook解决了什么？ React没有提供将可复用性行为“附加”到组件的途径。（例如，把组件连接到 store） 问题：组件之间复用状态逻辑很难 在hook出现之前，组件复用一般采用Render Props 和 高阶组件HOC，这类方案需要重新组织你的组件结构，让代码...

文章目录目录refs转发ref使用中的问题方案一：React.forwardRef实现自动转发方案二：回调Refs方案三：useImperativeHandle创建ref 目录 refs转发 Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧，Ref 转发使组件可以像暴露自己的 ref 一样暴露子组件的 ref。 下面是几个适合使用 refs 的情况： 管理焦点，文本选择或媒体播...