React
文章平均质量分 83
逐步探索React的各个部分
xumaozeng
学习boying
展开
-
2021-03-07 React原理解析04
2021-03-07 React原理解析04理解协调React中的数据结构React合成事件系统常见的组件优化技术定制组件的shouldComponentUpdate钩子PureComponentReact.memouseMemouseCallback理解协调React中的数据结构Flags注:这里的flags都是二进制,这个和React中用到的位运算有关。首先我们要知道位运算只能用于整数,并且是直接对二进制位进行计算,直接处理每一个比特位,是非常底层的运算,运算速度极快;其次,一个节点可能有多原创 2021-03-07 17:04:56 · 300 阅读 · 0 评论 -
2021-03-06 React原理解析03
2021-03-05 React原理解析03Hook简介Hook APIHook简介Hook是React16.8的新增特性,它可以在你不编写class的情况下使用state以及其他的React特性1、Hooks是什么?为了拥抱正能量函数式2、Hooks带来的变革,让函数组件有了状态和其他的React特性,可以替代class没有破坏性改动完全可选。无需重写任何已有代码就可以在一些组件中尝试Hook100%向后兼容。Hook不包含任何破坏性改动现在可用。Hook发布于v16.8没有计划从R原创 2021-03-06 19:18:57 · 154 阅读 · 0 评论 -
2021-03-03 React原理解析02
2021-03-03 React原理解析02协调-reconciliationfiber协调-reconciliation设计动力调用React的render()方法会创建一颗由React元素组成的树,在下一次state、props或context更新时候,相同的render()方法会返回一颗不同的树。React需要基于这两颗树之间的差别来判断如何有效的更新UI以保证当前UI与最新的树保持同步React提出了一套O(n)-n是树中元素的数量,启发式算法(diff算法):1、两个不同类型的元素会产生原创 2021-03-03 22:38:58 · 190 阅读 · 0 评论 -
2021-02-08 React原理解析01
2021-02-08 React原理解析01一、深入虚拟DOM二、JSX三、React核心API一、深入虚拟DOMReact本身只是一个DOM的抽象层,使用组件构建虚拟DOM什么是Virtual DOM、为什么用以及何处使用what:用Javascript对象表示DOM信息和结构,当状态变更的时候,重新渲染这个Javascript对象结构。这个Javascript对象称为Virtual DOM传统的dom渲染过程:将html解析成dom树将CSS解析成css tree合并二者为rende原创 2021-02-28 20:59:53 · 224 阅读 · 3 评论 -
2021-02-19 React面试题集合
2021-02-19 React面试题集合1、React中的key是什么,有什么作用key是react在渲染一系列相同类型的兄弟元素时,给每个元素指定一个稳定、可预测、兄弟间唯一的值,来帮助React识别哪些元素改变了,比如添加和删除,这样做可以避免在某些场景下的错误渲染并且提升React的渲染性能key的作用是用在使用diff算法对比react更新前后两棵树的比较时使用的,使得树的转换效率得以提高,组件实例基于它们的key来决定是否更新以及复用持续更新…...原创 2021-02-19 10:18:02 · 4685 阅读 · 1 评论 -
2021-02-04 React-router的使用及源码API实现
2021-02-03 React-router的使用及源码API实现react-router简介react-router包含三个库,react-router、react-router-dom和react-router-native。react-router提供最基本的路由功能,实际使用的时候根据应用运行的环境选择安装react-router-dom(在浏览器中使用)或react-router-native(在react-native中使用)yarn add react-router-dom 或yar原创 2021-02-04 15:44:00 · 231 阅读 · 0 评论 -
2021-02-01 React-redux的API设计与实现
2021-02-01 React-redux的API设计与实现Hooks APIuseReducerconst [state, dispatch] = useReducer(reducer, initialArg, init);其中init是个函数处理initialArg参数的useReducer是useState的替代方案。它接收一个形如(state, action)=>newState的reducer,并返回当前的state以及配套的dispatch方法useEffectuseEf原创 2021-02-01 17:39:55 · 182 阅读 · 0 评论 -
2021-01-29 Redux的源码简单实现
2021-01-29 Redux的源码简单实现Reducerreducer是什么,其实就是一个纯函数,接收旧的state和action,返回新的state(preState,action)=>newState之所以叫reducer,是和Array.prototype.reduce(reducer, initialValue)里的回调函数属于相同的类型。保持reducer的纯净非常重要,永远不要再reducer里做以下操作:修改传入参数执行有副作用的操作,如API请求和路由跳转调用非原创 2021-01-29 17:07:02 · 124 阅读 · 0 评论 -
2021-01-27 React高级API-Context
2021-01-27 React高级API-Context组件化优点增强代码重用性,提高开发效率简化调试步骤,提升整个项目的可维护性便于协同开发注意点:降低耦合性组件跨层级通信-ContextReact应用中,大部分数据是通过props属性自上而下(由父及子)进行传递的,遇到复杂的嵌套组件关系时,可以使用Context实现祖代组件想后代组件跨层级传值,类似于Vue中的provide&inject就是来源于ContextContext APIReact.createContext原创 2021-01-27 14:53:53 · 318 阅读 · 0 评论