All about React

首先，合成事件这个名词是从“Synthetic Event”翻译过来的，在react的官方文档和源码中，这个术语狭义上是指合成事件对象,一个普通的javascript对象。而在这里，我们谈论的是由众多不同类型事件的合成事件对象组成的合成事件系统(React’s Event Sy…

本文为意译，翻译过程中掺杂本人的理解，如有误导，请放弃继续阅读。 应用中局部UI中的javascript错误按理说不应该导致整个应用的崩溃。为了帮助React用户解决这种问题，React在16.x.x中引入了新的概念-“error boundary”。 什么是“error bo…

我们会把useState,useReducer和useEffect等等称之为“hook”。确切来说，hook是一个javascript函数。 从数据类型的角度来说，hook对象是一个“纯javascript对象(plain javascript object)”。从数据结构的角…

2020年的12月21日，react官方对外宣布了一个还处于打磨阶段的新特性：“React server component”。官网的blog上对于“React server component”的简短描述也赫然于屏幕上： 仅仅凭【Zero-Bundle-Size】寥寥数语，我…

本文为意译，翻译过程中掺杂本人的理解，如有误导，请放弃继续阅读。 具体来说，HOCs其实就是一个函数。只不过这个函数跟编程语言中普通的函数不同的是，它接受一个React组件作为输入，返回了一个新的React组件。 我们从转化的角度可以这么说：“如果说，React组件是将prop…

本文为意译，翻译过程中掺杂本人的理解，如有误导，请放弃继续阅读。 上面这个函数中的useState是我们接触到的第一个“Hook”。但是，这个例子也仅仅是一个引子，好戏还在后头呢。如果你对这个例子感到不是很理解，不用急，我们娓娓道来。 在这一章剩余部分，我们将会继续解释一下［我…

上面有一个注意点，那就是我们设置元素属性的写法是设置property而不是设置attibute。在DOM里面，property和attribute是两种概念。而设置property意味着只有有效的属性才会生效。 在react中，“react element”是一个术语，指的就是…

注意:下文中,反复提到"实例"一词,如无特别交代,它指的是第三篇章的instance的这个概念。 在react中，“component”概念可以理解为一个身份的象征。假如我们将root virtual DOM节点比作virtual DOM世界的周天子的话，那么“componen…

二话不说，今天我们就来赏析react@ 15.0.0源码中面向对象范式中父类（称之为模板类或者自定义类型都行）的写法。 在react@ 15.0.0源码中，这种写法的应用见诸于react几种component的模板类的定义代码。 在这里，我们不妨比较一下这种在js中实现模板类的…

更新 我们已经开始开发 React 18 版本，这将是我们的下一个主要版本。 我们创建了一个Working Group（工作组），帮助社区为逐步采用 React 18 中的新功能做。 我们已经发布了

TLDR; useLayoutEffect 和 useEffect 的相同点是： 函数签名是一样的； clean up 机制是一样的； 提交 DOM mutation 次数是一样的。 useLayou