![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 77
葡萄糖o_o
一个热爱前端技术的群众。
展开
-
react和vue在响应式上的不同理解
在vue中数据是可变的,而副作用监听数据的变化。所以在vue中props中的数据是可以被改的,并且vue本身还能够支持props数据变化之后的响应。vue的响应以数据源中心向外辐射,换句话说只要数据改了vue就能响应变化,无论这个数据是在什么地方改的。react实现响应的方法是,需要对比两次数据是否相同,修改前和修改后数据相同则不更新组件,否则触发响应,更新整个组件,包括子组件。vue实现响应的方法是,首先收集依赖这个数据的副作用(视图更新、计算属性等),当数据修改时统一调用依赖这个数据的副作用完成响应。原创 2023-03-06 12:54:50 · 840 阅读 · 0 评论 -
问题记录之前端路由系统
公司的一个项目中使用了根据路由配置生成对应的Route,而配置会存在一份在store中,当store中的RouteConfig变化时,会根据最新的配置来生成最新的试图。因为路由配置系统实现上的一些缺陷本次需要对其就行性能上的一些优化,优化后的路由系统在运行时偶尔会导致页面白屏,在排查后总结一下问题导致的原因和问题的解决方案,和过程中的一些思考,以便后期回归。原创 2022-10-01 20:31:24 · 436 阅读 · 0 评论 -
antd表单控件的设计思想
antd对于form中输入控件的抽象十分简单,只要能接收value和onChange属性的组件都可以成为Form.Item的子组件,为Form对应的字段提供值。对于输入控件的抽象我认为这已经达到了极致,事件(onChange)产生值(value)。事件向上,值向下,完全符合React哲学。如何实现一个标准的输入组件?对于输入组件首先需要具备接收value和onChange属性的能力,这两个属性被提供的情况下这个组件被称为受控组件,它受到父组件控制,状态来自父组件。当父组件没有提供value的情况下该组件原创 2021-11-28 14:21:23 · 741 阅读 · 0 评论 -
阅读react-redux源码(七) - 实现一个react-redux
1. 之前说过可以引起React组件更新的元素有两种,一个是props的更新,一个是state的更新,但是props的跟新放眼整个react应用也是state的更新。所以React应用中组件重新渲染只能通过state的更新。2. 在React中需要跨层级传递消息可以使用Context。3. Redux可以通过subscribe来订阅store中state的更新。原创 2020-08-02 17:02:34 · 266 阅读 · 0 评论 -
阅读react-redux源码(六) - selectorFactory处理store更新
阅读react-redux源码 - 零阅读react-redux源码 - 一阅读react-redux源码(二) - createConnect、match函数的实现阅读react-redux源码(三) - mapStateToPropsFactories、mapDispatchToPropsFactories和mergePropsFactories阅读react-redux源码(四) - connectAdvanced、wrapWithConnect、ConnectFunction和checkF.原创 2020-08-01 13:59:34 · 264 阅读 · 0 评论 -
阅读react-redux源码(五) - connectAdvanced中store改变的事件转发、ref的处理和pure模式的处理
在[阅读react-redux源码(四) - connectAdvanced、wrapWithConnect、ConnectFunction和checkForUpdates](https://blog.csdn.net/letterTiger/article/details/107305480)中介绍了函数connectAdvanced是如何关联到store变动的,其实这个函数做的事情不仅仅有关联变动,还有对于store改变的事件转发、ref的处理和pure模式的处理。原创 2020-07-30 08:29:01 · 380 阅读 · 0 评论 -
阅读react-redux源码(四) - connectAdvanced、wrapWithConnect、ConnectFunction和checkForUpdates
阅读react-redux源码 - 零阅读react-redux源码 - 一阅读react-redux源码(二) - createConnect、match函数的实现阅读react-redux源码(三) - mapStateToPropsFactories、mapDispatchToPropsFactories和mergePropsFactories终于到了最核心的connectAdvanced.js文件,在这里做的最主要的事情就是响应Provider提供的store的改变。除了响应store的.原创 2020-07-12 21:12:30 · 417 阅读 · 0 评论 -
阅读react-redux源码(三) - mapStateToPropsFactories、mapDispatchToPropsFactories和mergePropsFactories
阅读react-redux源码 - 零阅读react-redux源码 - 一阅读react-redux源码(二) - createConnect、match函数的实现mapStateToPropsFactoriesimport { wrapMapToPropsConstant, wrapMapToPropsFunc } from './wrapMapToProps'export function whenMapStateToPropsIsFunction(mapStateToProps) {.原创 2020-07-08 08:40:12 · 374 阅读 · 0 评论 -
阅读react-redux源码(二) - createConnect、match函数的实现
阅读react-redux源码 - 零阅读react-redux源码 - 一阅读react-redux源码(二) - createConnect、match函数的实现上一节看了Provider组件的实现,主要做的事情就是通过Context透传了来自redux的store和监听store变化的事件对象Subscription的实例。本节会深入到connect组件的内部查看实现方式,整个connect组件的实现相对复杂,并且巧妙。通过入口文件可以知道connect组件是/src/connect/c.原创 2020-07-07 08:37:21 · 494 阅读 · 0 评论 -
阅读react-redux源码 - 一
阅读react-redux源码零中准备了一些react、redux和react-redux的基础知识。从使用的例子中可以看出来顶层的代码中需要用一个来自react-redux的Provider组件提供redux的store,然后Provider的后代组件通过connect组件连接自己的业务组件就可以获取到通过Provider组件跨组件传递过来的store中的state值。所以我们先从Provider开始看源码的实现。因为源码很短,直接先贴出来整个源码如下:import React, { useMemo,原创 2020-06-20 23:12:18 · 316 阅读 · 0 评论 -
阅读react-redux源码 - 零
react的技术栈一定会遇到redux,而在react中使用redux需要使用react-redux,那么react-redux是怎么包装redux已适用react的呢?react-redux的原理是什么呢?带着这些问题,翻看了react-redux的源码,小有收获,写博客以记,方便以后翻阅。0. 准备在继续之前先回顾一些redux、react和react-redux必要的知识。redu...原创 2020-03-30 17:56:47 · 337 阅读 · 0 评论 -
在React中获取数据
React初学者经常从不需要获取数据的应用开始。他们经常面临一个计数器,任务列表获取井字棋游戏应用。这是很好的,因为在开始学习React的时候,数据获取在你的应用中添加了另一层复杂度。然而,有些时候你想要从自己的或者第三方API请求真实世界的数据。这个文章给你一个怎么在React中获取数据的演练。这没有外部状态管理的解决方案,像Redux或者MobX参与存储你获取到的数据。相反你将要使用Reac...翻译 2019-08-13 08:03:56 · 1937 阅读 · 0 评论