react
文章平均质量分 90
详细介绍react的相关知识
前端不释卷leo
热爱前端,一起学习,一起进步。积极更新博客。
展开
-
微前端之 qiankun 入门、上手、实战(构建大型 web 应用)
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。微前端架构具备以下几个核心价值:技术栈无关主框架不限制接入应用的技术栈,微应用具备完全自主权,独立开发、独立部署,微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新。增量升级,在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略。独立运行时,每个微应用之间状态隔离,运行时状态不共享。.........原创 2022-07-16 21:55:07 · 10503 阅读 · 39 评论 -
React -- State Hook 详细介绍(函数组件也可以使用state了)
目录Hook 简介Hook 对 React 意味着什么?Hook 的使用动机是什么?1、在组件之间复用状态逻辑很难2、复杂组件变得难以理解3、难以理解的 classState Hook基本例子Hook 和 函数组件Hook 是什么?声明 StateuseState调用useState参数useState返回值读取 State更新 State示例分析步骤分析方括号的作用使用多个 state 变量总结Hook 简介...原创 2022-01-14 20:44:27 · 2596 阅读 · 9 评论 -
React Context 详细介绍(状态共享、数据传递)
目录Context 是什么?Context 什么时候用?API介绍React.createContextContext.ProviderClass.contextTypeContext.ConsumerContext.displayName示例动态 Context在嵌套组件中更新 Context消费多个 Context注意事项Context 是什么?Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。在一原创 2022-01-12 20:56:58 · 19502 阅读 · 19 评论 -
React性能优化之shouldComponentUpdate
前言:React 构建并维护了一套内部的 UI 渲染描述。它包含了来自你的组件返回的 React 元素。该描述使得 React 避免创建 DOM 节点以及没有必要的节点访问,因为 DOM 操作相对于 JavaScript 对象操作更慢。虽然有时候它被称为“虚拟 DOM”,但是它在 React Native 中拥有相同的工作原理。当一个组件的 props 或 state 变更,React 会将最新返回的元素与之前渲染的元素进行对比,以此决定是否有必要更新真实的 DOM。当它们不相同时,React 会更原创 2021-11-29 22:20:44 · 6252 阅读 · 2 评论 -
React高阶组件(HOC),让组件复用与扩展变得简单,省时、省力又省心,何不用起来?
说到React的高阶组件,不得不摘抄官网一段经典的介绍:高阶组件(HOC)是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分,它是一种基于 React 的组合特性而形成的设计模式。具体而言,高阶组件是参数为组件,返回值为新组件的函数。组件是将 props 转换为 UI,而高阶组件是将组件转换为另一个组件。HOC 在 React 的第三方库中很常见,例如 Redux 的connect和 Relay 的createFragmentContain...原创 2021-11-25 21:40:38 · 1951 阅读 · 3 评论 -
React中的render props,让组件复用(共享)变得简单,你还不赶紧掌握它?
术语“render prop”是指一种在react组件之间使用一个值为函数的prop共享代码的简单技术。具有 render prop 的组件接受一个函数,该函数返回一个 React 元素并调用它而不是实现自己的渲染逻辑。我们知道,组件是 React 代码复用的主要单元,但如何分享一个组件封装到其他需要相同 state 组件的状态或行为并不总是很容易。如何使用render prop?官网举了一个经典的跟踪 Web 应用程序中的鼠标位置的例子:Render Props – React我.原创 2021-11-22 21:04:55 · 2183 阅读 · 4 评论 -
面试官:react中的setState()是同步还是异步?如何证明?
你真的理解react中的setState了吗?它是同步还是异步呢?原创 2021-11-20 12:41:46 · 1884 阅读 · 2 评论 -
Redux基本用法(在react中使用,链路打通)
Redux 是 JavaScript 应用的状态容器,提供可预测的状态管理。当一个项目的组件很多,且多个组件需要共享一个状态,即多交互、多数据源,如某个组件的状态,需要其他组件共享;某个状态需要在任何组件都可以拿到;一个组件需要改变全局状态;一个组件需要改变另一个组件的状态等,此时可以考虑使用Redux。基本使用redux的主要组成部分就不说了,直接通过实例讲在redux在react项目的使用。1、安装reduxnpm install -S redux2、新建一个文件夹,命名为原创 2021-10-28 21:25:35 · 910 阅读 · 3 评论 -
React组件间通信(常用方式,简单易用)
React知识中一个主要内容便是组件之间的通信,以下列举几种常用的组件通信方式,结合实例,通俗易懂,建议收藏。一、父子组件通信原理:父组件通过props(与vue中的props区分开)向子组件通信,子组件通过回调事件与父组件通信。首先,先创建一个父组件Parent.js跟子组件Children.js,二者的关系为直接父子关系。Parent.js父组件如下,给父组件一个默认状态state,引入子组件,通过在子组件加上toChildren={this.state.msg},该处即为向子组件传..原创 2021-10-27 00:00:37 · 4564 阅读 · 2 评论 -
React学习笔记 -- 组件通信之路由传参(react-router-dom)
最近在学习react,现在的工作中使用的是vue,在学习的过程中对两者进行比较,加深理解。 以下是react中的一小部分知识点,我个人觉得也是比较常用的知识点,react组件通信的其中一种方式--路由传参(react组件通信的方式有多种,如props、事件回调、context、router、redux、缓存等等)。现在单页面SPA应用的比较广泛,在不刷新整个页面进行部分页面的跳转,使用路由跳转便在所难免,那么react路由除了进行页面之间的跳转,还有很大一个作用就是进行页面或者组件切换时传递参...原创 2021-10-24 13:07:30 · 4775 阅读 · 3 评论