React
文章平均质量分 93
React学习笔记
CUG-GZ
这个作者很懒,什么都没留下…
展开
-
2022 年的 React 生态
React 是用于构建用户界面的JavaScript库,其核心是让开发者能够使用函数组件创建组件驱动的用户界面。它带有一些内置解决方案,例如,用于本地状态、副作用和优化性能的 React Hooks,但这些只能处理函数(组件和Hook)以创建 UI。React 拥有一个庞大的生态系统,可以帮助开发人员更快地实现复杂的UI。本文就来看看 React 最新的生态系统,以实现快速技术选型!原创 2022-01-19 10:12:10 · 1971 阅读 · 0 评论 -
一文带你读懂React 组件设计模式
目录1. 有状态组件和无状态组件(1)概念(2)示例(3)PureComponent(4)React.memo2. 高阶组件(1)基本形式(2)抽取共同逻辑(3)高级用法(4)链式调用(5)不要滥用3. render props(1)概念(2)传递 props(3)不局限于 children(4)依赖注入(5)render props 和高阶组件对比4. 提供者模式(1)概念(2)实现提供者模式(3)React v16.3.0 之前的提供者模式(4)React v16.3.0 之后的提供者模式(5)两种提供原创 2021-02-16 00:52:23 · 1017 阅读 · 0 评论 -
一文带你了解React生命周期
目录1. React生命周期概览2. 组件挂载阶段(1)constructor(2)getDerivedStateFromProps(3)render(4)componentDidMount()3. 组件更新阶段(1)shouldComponentUpdate(2)getSnapshotBeforeUpdate(3)componentDidUpdate4. 组件卸载阶段5. 总结1. React生命周期概览React 会把状态的变更更新到 UI,状态的变更过程必然会经历组件的生命周期。所谓的生命周期就是原创 2021-02-11 23:35:03 · 249 阅读 · 0 评论 -
一文带你了解React 纯函数组件
1. 纯函数所谓纯函数,它是这样一种函数:即相同的输入,永远会得到相同的输出,而且没有任何可观察的副作用。从纯函数的定义,可以提取出纯函数的必要条件:纯函数接受参数,基于参数计算,返回一个新对象;不会产生副作用,计算过程不会修改输入的参数并且不修改其作用域之外的参数或方法;相同的输入保证相同的输出。先来看个例子,做下对比:let friend = { firstName: 'zhang', lastName: 'san', age: 18}// 非纯函数:会修改原创 2021-02-11 23:27:34 · 2521 阅读 · 0 评论 -
「React」一文带你了解 Redux
目录1. React 组件状态(1)什么数据放在 state 中(2)修改 state 的正确方式(3)state 改变引发重新渲染的时机(4)this.setState() 的同步与异步(5)setState 的第二个参数(6)函数式 setState2. Redux 核心概念3. Redux 数据管理(1)Store(2)Action(3)Reducer4. Redux API(1)createStore(2)store.dispatch()(3)store.subscribe()5. Redux 适用原创 2021-01-24 16:06:53 · 336 阅读 · 1 评论 -
「React」一文带你了解高阶组件HOC
目录1. 高阶组件的概念2. 高阶组件实现属性代理(1)操作 props(2)获取 refs 的引用(3)抽象 state(4)用其他元素包裹组件3. 高阶组件实现渲染劫持4. 高阶组件实现反向继承5. 高阶组件抽取共同逻辑6. 高阶组件的高级用法7. 高阶组件的链式调用8. 高阶组件的应用场景(1)React Redux(2)埋点操作(3)页面权限管理9. 不要滥用高阶组件(1)处理 displayName 麻烦(2)增加静态函数的支持(3)嵌套调用混乱(4)重复产生 React 组件10. 高阶组件的注原创 2021-01-23 17:58:02 · 549 阅读 · 0 评论 -
「React」一文带你了解React diff 算法
React diff 算法1. diff 算法实际上,diff 算法探讨的就是虚拟 DOM 树发生变化后,生成 DOM 树更新补丁的方式。它通过对比新旧两株虚拟 DOM 树的变更差异,将更新补丁作用于真实 DOM,以最小成本完成视图更新。![CgqCHl_qyouAAkb9AAB_cmWuZhc920_mh1609406106571.jpg](https://img-blog.csdnimg.cn/img_convert/58bf818eacf7179e13d528d4e7637f68.png#a原创 2021-01-01 18:49:17 · 2759 阅读 · 3 评论 -
「React」一文带你了解虚拟 DOM
目录1. 虚拟 DOM 的概念2. 虚拟 DOM 的工作流程3. 虚拟DOM可以带来更好的性能吗?4. 虚拟 DOM 的特点1. 虚拟 DOM 的概念虚拟 DOM 的工作原理是通过 JS 对象模拟 DOM 的节点。在 Facebook 构建 React 初期时,考虑到要提升代码抽象能力、避免人为的 DOM 操作、降低代码整体风险等因素,所以引入了虚拟 DOM。虚拟 DOM(Virtual DOM)本质上是 JavaScript 和 DOM 之间的一个映射缓存,它在形态上表现为一个能够描述 DOM 结原创 2020-12-31 16:13:56 · 2757 阅读 · 0 评论 -
React setState 是同步更新还是异步更新?
目录1. setState 基本使用2. setState 同步场景3. 调用 setState 发生了什么(1)setState(2)enqueueSetState(3)enqueueUpdate(4)batchingStrategy4. 总结1. setState 基本使用组件除了可以接收外界传递的状态外,还可以拥有自己的状态,并且这个状态也可以通过 setState 来进行更新。setState 用于变更状态,触发组件重新渲染,更新视图 UI。其语法如下:setState(updater, ca原创 2020-12-31 11:19:55 · 1595 阅读 · 2 评论 -
「React」一文带你了解 React-Router
React路由原理1. React Router概述对于多页面应用而言,一个 URL 对应的就是一个 HTML 页面,而对于单页面应用,一个 URL 对应的其实是一个组件的展示。我们可以通过 URL 来控制 UI 或者 HTML 的展示,这就是路由。React Router 包含了三个库:react-router、react-router-dom 和 react-router-native:react-router: 提供最基本的路由功能,实际使用中我们会根据应用运行的环境选择安装不同的库,并不原创 2020-12-28 10:58:08 · 1116 阅读 · 1 评论 -
「React」一文带你了解 React基础
目录一、开发前的准备1. 开发环境2. 开发工具3. 开发依赖二、React脚手架三、创建React项目四、React初体验五、初识JSX1. 什么是JSX2. 为什么使用JSX3. JSX书写规范4. JSX注释5. JSX嵌入变量6. JSX嵌入表达式7. JSX绑定属性8. JSX绑定事件9. React条件渲染10. React列表渲染六、JSX的本质七、案例练习一、开发前的准备1. 开发环境(1)Node.jsNode.js 是一个基于 Chrome V8 引擎的 JavaScript 运原创 2020-11-17 17:32:43 · 439 阅读 · 0 评论