SegmentFault 思否技术周刊 -- 进击的 React
React 是一个免费的开放源代码前端 JavaScript 工具库， 用于基于 UI 组件构建用户界面。 它由 Meta 和一个由个人开发者和公司组成的社群维护。 React 可用作开发具有 Next.js 等框架的单页、手机或服务器渲染应用程序的基础。
知识理念
2022年3月29号，React18正式版发布。从v16开始，React团队就在普及并发的概念。在v18的迭代过程中（alpha、Beta、RC），也一直在科普并发特性，所以正式版发布时，已经没有什么新鲜特性。
本文主要讲解v18发布日志中透露的一些未来发展趋势。
没事翻了翻 React Router 的文档，发现已推到了 v6.2.2 版本，这个版本做了很大的改动，让我们一起看看吧。
《React 源码解析系列 - React 的 render 异常处理机制》
异常是如何产生的；如何捕获 render 异常；React 源码中具体是如何捕获 render 异常的；处理异常。
我们知道，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 是一个视图层框架，其核心思想是 UI = f(state)，即「UI 是 state 的投影」，state 自上而下流动，整个 React 组件树由 state 驱动。当一个 React 应用程序足够复杂，组件嵌套足够深时，组件树中的状态流动会变得难以控制（例如你如何跟踪父节点的 state 流动到叶子节点时产生的变化）。这时我们就需要对 state 进行管理，在进行状态管理的同时，还需要分清 React 应用中有哪些状态类型，方便制定出最适合的状态管理方案。
应用与实践
作为前端，想必你对防抖（debounce）、节流（throttle）这两个概念不陌生。在React18中，基于新的并发特性，React原生实现了防抖的功能。
今天我们来聊聊这是如何实现的。
《如何在 React 中优雅的使用 Interval（轮询）》
在前端开发中，经常会使用轮询（setInterval），比如后端异步数据处理，需要定时查询最新状态。但是在用React Hook进行轮询操作时，可能会发现setInterval没有那么轻松驾驭，今天笔者就来谈谈在项目开发中是如何解决setInterval调用问题的，以及如何更加优雅的使用setInterval。
在 React Native 开发中，如果要实现弹窗效果，通常的方案是使用官方的 Modal 组件。不过，官方的 Modal 组件会有一些缺陷，比如在 Android 端无法全屏显示，而在iOS端中，当打开一个新的ViewController 时会被Modal 组件给覆盖掉等。因此，在 React Native 应用开发中，为了屏蔽这些兼容性问题，我们可以使用 react-native-root-siblings 插件提供的 RootSiblings 组件来实现。
在前端开发中，通过监听 onInput 事件来触发输入框内容的更新，是没有问题的，但如果输入的内容有中文的时候，会出现类似 zhong'wen'nei'rong这样的备选内容。
这种内容的影响普遍不会很大，但是当需要对输入的内容进行一些耗时的操作的时候，这个影响就不得不考虑一下了，比如说内容需要进行复杂的渲染、通过网络实时发送等等场景。
对这种问题的解决方案，需要借助浏览器提供的组合输入事件 。
想必大家都知道React有一套基于Fiber架构的调度系统。这套调度系统的基本功能包括：
· 更新有不同优先级· 一次更新可能涉及多个组件的render，这些render可能分配到多个宏任务中执行（即时间切片）· 高优先级更新会打断进行中的低优先级更新
本文会用100行代码实现这套调度系统，让你快速了解React的调度原理。
凡是依赖虚拟DOM的框架，都需要比较前后节点变化的Diff算法。网上有大量讲解Diff算法逻辑的文章。然而，即使作者语言再精练，再图文并茂，相信大部分同学看完用不了多久就忘了。
今天，我们换一种一劳永逸的学习方法 —— 实现React的核心Diff算法。
不难，只有40行代码。不信？往下看。
为了将之前业务开发的组件进行统一维护以及便于后续在其他项目复用，以此为目的而搭建组件库。由于之前开发的项目是基于 React 实现，经过调研，决定选用较为普遍使用的 Dumi 作为组件库文档工具，Father 作为组件库打包工具。
自从 React Hooks 推行后，Redux 作为状态管理方案就显得格格不入了。Dan Abramov 很早就提到过 “You might not need Redux”，开发者必须要写很多“模式代码”，繁琐以及重复是开发者不愿意容忍的。除了 actions/reducers/store 等概念对新手不够友好之外，最大的缺点就是它对 typescript 类型支持太烂，在大型项目中这是不可接受的。
通过对 Redux 的优缺点总结来看，我们可以自己写一个状态管理库，本次需要达到的目的：
- typescript 类型要完善
- 足够简单，概念要少
- 与 React Hooks 要搭配
对于函数组件是否需要再次渲染，可以根据 React.memo 与 React.useMemo 来优化。
在典型的 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大拿。
从v15～v16重构的Fiber架构，再到v16～v17新增的并发模式，React已经逐渐从UI库变为小型的操作系统。
对于想学习React源码的同学来说，这同时是机遇与挑战。
挑战是：React内部运行流程真的很复杂。
机遇是：学完之后，除了拥有框架开发能力外，你的收获将不限于：
- 编程范式：函数式编程的代数效应思想
- 操作系统：如何从零实现协程（fiber架构）
- 数据结构：链表、树、小顶堆
- 算法：O(n)的Diff算法、掩码
- 深入浏览器渲染原理
PS：大家想看哪些方面的技术内容，可以在评论区留言喔 ~如有问题可以添加小姐姐微信~