共计 3745 个字符，预计需要花费 10 分钟才能阅读完成。
React 是一个收费的凋谢源代码前端 JavaScript 工具库，用于基于 UI 组件构建用户界面。它由 Meta 和一个由集体开发者和公司组成的社群保护。React 可用作开发具备 Next.js 等框架的单页、手机或服务器渲染应用程序的根底。
常识理念
《React 18 正式版公布，将来发展趋势是？》
2022 年 3 月 29 号，React18 正式版公布。从 v16 开始，React 团队就在遍及并发的概念。在 v18 的迭代过程中（alpha、Beta、RC），也始终在科普并发个性，所以正式版公布时，曾经没有什么陈腐个性。
本文次要解说 v18 公布日志中走漏的一些将来发展趋势。
《React Router v6 摸索》
没事翻了翻 React Router 的文档，发现已推到了 v6.2.2 版本，这个版本做了很大的改变，让咱们一起看看吧。
《React 源码解析系列 – React 的 render 异样解决机制》
异样是如何产生的；
如何捕捉 render 异样；
React 源码中具体是如何捕捉 render 异样的；
解决异样。
《React 官网团队出手，补齐原生 Hook 短板》
咱们晓得，Hooks 应用时存在所谓的闭包陷阱，加大了 Hooks 的上手门槛，也让开发者更容易写出有 bug 的代码。
当初，React 官网团队要出手解决这个问题。
《一些对于 react 的 keep-alive 性能相干常识在这里(上)》
这是在 2022 年开发中 PM 提的一个需要, 某个 table 被用户输出了一些搜搜条件并且浏览到了第 3 页, 那如果我跳转到其余路由后返回以后页面, 心愿搜寻条件还在, 并且仍处于第三页, 这不就是 vue 外面的 keep-alive 标签吗, 但我以后的我的项目是用 react 编写的。
此次讲述了我经验了 “ 应用内部插件 ”-> “ 放弃内部插件 ”-> “ 学习并自研插件 ”-> “ 了解了相干插件的窘境 ” -> “ 期待 react18 的 Offscreen”, 所以论断是举荐急躁期待 react18 的自反对, 然而学习以后相似插件的原理对本人还是很有启发的。
[《一些对于 react 的 keep-alive 性能相干常识在这里(下)》
](https://segmentfault.com/a/11…)
本篇承接上篇《一些对于 react 的 keep-alive 性能相干常识在这里 (上)》, 从第九点开始。
比方页面上的 table 里有 100 条数据, 咱们想看第 100 条数据, 那就要滚动不少间隔, 不少场景这种滚动间隔也是有必要保留的。
这里应用的办法其实比拟传统啦, 首先在 KeepAliveProvider 下发一个解决滚动的办法:
《React 50 种状态类型》
React 是一个视图层框架，其核心思想是 UI = f(state)，即「UI 是 state 的投影」，state 自上而下流动，整个 React 组件树由 state 驱动。当一个 React 应用程序足够简单，组件嵌套足够深时，组件树中的状态流动会变得难以管制（例如你如何跟踪父节点的 state 流动到叶子节点时产生的变动）。这时咱们就须要对 state 进行治理，在进行状态治理的同时，还须要分清 React 利用中有哪些状态类型，不便制订出最适宜的状态治理计划。
利用与实际
《React 如何原生实现防抖？》
作为前端，想必你对防抖（debounce）、节流（throttle）这两个概念不生疏。在 React18 中，基于新的并发个性，React 原生实现了防抖的性能。
明天咱们来聊聊这是如何实现的。
《如何在 React 中优雅的应用 Interval（轮询）》
在前端开发中，常常会应用轮询（setInterval），比方后端异步数据处理，须要定时查问最新状态。然而在用 React Hook 进行轮询操作时，可能会发现 setInterval 没有那么轻松驾驭，明天笔者就来谈谈在我的项目开发中是如何解决 setInterval 调用问题的，以及如何更加优雅的应用 setInterval。
《react navigation 实现通明弹窗》
在 React Native 开发中，如果要实现弹窗成果，通常的计划是应用官网的 Modal 组件。不过，官网的 Modal 组件会有一些缺点，比方在 Android 端无奈全屏显示，而在 iOS 端中，当关上一个新的 ViewController 时会被 Modal 组件给笼罩掉等。因而，在 React Native 利用开发中，为了屏蔽这些兼容性问题，咱们能够应用 react-native-root-siblings 插件提供的 RootSiblings 组件来实现。
《React Hooks 实现的中文输出组件》
在前端开发中，通过监听 onInput 事件来触发输入框内容的更新，是没有问题的，但如果输出的内容有中文的时候，会呈现相似 zhong’wen’nei’rong 这样的备选内容。
这种内容的影响广泛不会很大，然而当须要对输出的内容进行一些耗时的操作的时候，这个影响就不得不考虑一下了，比如说内容须要进行简单的渲染、通过网络实时发送等等场景。
对这种问题的解决方案，须要借助浏览器提供的组合输出事件。
《100 行代码实现 React 外围调度性能》
想必大家都晓得 React 有一套基于 Fiber 架构的调度零碎。
这套调度零碎的基本功能包含：· 更新有不同优先级
· 一次更新可能波及多个组件的 render，这些 render 可能调配到多个宏工作中执行（即工夫切片）
· 高优先级更新会打断进行中的低优先级更新本文会用 100 行代码实现这套调度零碎，让你疾速理解 React 的调度原理。
《40 行代码实现 React 外围 Diff 算法》
但凡依赖虚构 DOM 的框架，都须要比拟前后节点变动的 Diff 算法。
网上有大量解说 Diff 算法逻辑的文章。然而，即便作者语言再简练，再图文并茂，置信大部分同学看完用不了多久就忘了。明天，咱们换一种一劳永逸的学习办法 —— 实现 React 的外围 Diff 算法。
不难，只有 40 行代码。不信？往下看。
《从零开始搭建 React 组件库》
为了将之前业务开发的组件进行对立保护以及便于后续在其余我的项目复用，以此为目标而搭建组件库。因为之前开发的我的项目是基于 React 实现，通过调研，决定选用较为广泛应用的 Dumi 作为组件库文档工具，Father 作为组件库打包工具。
《手把手教你写一个 React 状态治理库》
自从 React Hooks 推广后，Redux 作为状态治理计划就显得心心相印了。Dan Abramov 很早就提到过“You might not need Redux”，开发者必须要写很多“模式代码”，繁琐以及反复是开发者不违心容忍的。除了 actions/reducers/store 等概念对老手不够敌对之外，最大的毛病就是它对 typescript 类型反对太烂，在大型项目中这是不可承受的。
通过对 Redux 的优缺点总结来看，咱们能够本人写一个状态治理库，本次须要达到的目标：
- typescript 类型要欠缺
- 足够简略，概念要少
- 与 React Hooks 要搭配
《React 性能优化 – 防止反复渲染》
对于函数组件是否须要再次渲染，能够依据 React.memo 与 React.useMemo 来优化。
《React 父组件如何被动“分割”子组件》
在典型的 React 数据流中，props 是父子组件交互的惟一形式。要批改一个子组件，须要应用新的 props 从新渲染它。然而，在某些状况下，须要在典型数据流之外被动查看或强制批改子组件，这时候就须要应用 Refs，将 DOM Refs 裸露给父组件。
《direflow 落地分享 - 以 React 形式写 WebComponents》
React 大家都很相熟，WebComponents 预计也有所耳闻。那么 React+WebComponents 会碰撞出怎么的火花呢？
其实有这样一个开源框架，反对 React 形式写组件，最终打包后的产物为 WebComponents。它就是 direflow，这个框架反对 React 形式写 WebComponents。
热门问答
- react 的 ts 最佳实际问题
- react useEffect 中绑定的事件函数怎样才能取到最新的 state？
- 求问怎么解决 react hooks 程序问题导致子组件非常臃肿的问题
- react 条件渲染下 state 是否重置的问题
- react 构造函数中这句怎么了解
- React 应用 concurrent 模式，渲染阶段超出工夫片，高优先级工作插队，上一个工作上 fiber 上的 lanes 会怎么解决
- react route 命名最佳实际
- React 启动我的项目内容渲染出页面，控制台报错
课程举荐
《自顶向下学 React 源码》
课程播种：
学习 React 源码，不仅能把握业界最顶尖前端框架的运行原理，摸索前端边界。也能让本人成为业务线 React 大拿。
从 v15～v16 重构的 Fiber 架构，再到 v16～v17 新增的并发模式，React 曾经逐步从 UI 库变为小型的操作系统。
对于想学习 React 源码的同学来说，这同时是时机与挑战。
挑战是：React 外部运行流程真的很简单。
时机是：学完之后，除了领有框架开发能力外，你的播种将不限于：
- 编程范式：函数式编程的代数效应思维
- 操作系统：如何从零实现协程（fiber 架构）
- 数据结构：链表、树、小顶堆
- 算法：O(n)的 Diff 算法、掩码
- 深刻浏览器渲染原理
PS：大家想看哪些方面的技术内容，能够在评论区留言喔 ~
如有问题能够增加小姐姐微信~