最近工作中需要制作一个图片预览的插件，在参考了很多产品（掘金、知乎、简书、石墨等）的图片预览之后，最终还是觉得石墨的比较符合我们的产品需求。

本来以为能在社区中找到相关插件，但想法美好，现实却很骨感，于是便决定自己手撸一个，顺便也学习一下组件的开发流程。

使用 React 开发插件解决了事件和数据绑定的问题，Chimee 的插件系统可扩展性比较强，如果对其比较感兴趣的可以看看官方的这篇《为什么要将 Chimee 设计成一个组件化框架？》。

都说JSX会被babel编译成React.createElement方法，那它具体是怎么实现的呢？在React17版本中，又做了哪些改进呢？带着这些问题，我们去React的源码世界里去一探究竟！

在使用 React 之前，不知道小伙伴们有没有遇到过 更新卡顿 的问题，如下为 React 应用更新时的火焰图，JS 执行 287 ms 后，渲染任务才开始（25.4ms）。

主流浏览器刷新频率为 60Hz，即每 16.6ms 浏览器刷新一次，每 16.6ms 要完成 JS 执行、重绘重排。而 JS 线程和 GUI 线程是互斥的，在浏览器的一帧里（16.6ms）JS 脚本执行和页面渲染是同步执行的，一旦 JS 脚本执行时间过长，页面就会出现掉帧卡顿。

为了减少 JS 脚本执行的时长，React 重写了架构来解决卡顿问题。

Improving React app performance often comes down to finding bottlenecks and fixing them. One well-placed memoization can make a slow app fast again. But how to find performance bottlenecks?

在 React 诞生之初，Facebook 宣传这是一个用于前端开发的界面库。在大型应用中，如何处理好 React 组件通信和状态管理就显得非常重要。

为了解决这一问题，Facebook 最先提出了单向数据流的 Flux 架构，弥补 React 开发大型网站的不足。后续社区里又出现了一系列的前端状态管理解决方案。

本文会对 Redux、Mobx、Recoil 等几个状态管理方案进行深入到原理的介绍，并会给每个库都配一个 todomvc 的例子来对比。

代码逻辑复用 是我们开发人员减少代码重复度，进行代码优化的一个重要因素，上期我们的同学分享了关于 Vue 框架的相关逻辑复用的方法及原理，本期我们一起来了解下 React 框架中的逻辑复用。

At Shopify, we develop a bunch of different React Native mobile apps: Shop, Inbox, Point of Sale, Shopify Mobile, and Local Delivery. These apps represent different business domains, but they often have shared pieces of functionality like login or foundational blocks they build upon. Wouldn’t it be great to leverage development speed and focus on important product features by reusing code other teams have already written? Sure, but it might be a big and time consuming effort that discourages teams. Usually, contributing to a new repo is more tedious and error prone in comparison to contributing to an existing repository. The developer needs to create a new repository, set up continuous integration (CI) and distribution pipelines, and add configs for Jest, ESint, and Babel. It might be unclear where to start and what to do.

My team, React Native Foundations, decided to invest in simplifying the process for developers at Shopify. In this post, I'll walk you through the process of extracting those shared elements, the setup we adopted, the challenges we encountered, and future lines of improvement.

关于如何制作一个多平台英语学习类答题 PK 小游戏。

对于react状态管理库，大家比较熟悉的可能是Redux，但是redux虽然设计得比较简洁，但是他却有一些问题，比如需要写大量的模板代码；需要约定新的状态对象是全新的，如果我们不用全新的对象，可能会导致不更新，这是常见的redux状态不更新问题，所以需要开发者自己去保证，所以不得不引入例如immer这类的库；另外，redux本身是框架无关的库，他需要和redux-react结合才能在react中使用。使用我们不得不借助redux toolkit或者rematch这种内置了很多最佳实践的库以及重新设计接口的库，但与此同时也增加了开发者的学习成本。

所以react的状态管理的轮子层出不穷，下面将会介绍面向未来设计的react状态管理库——recoil。

「Hooks are functions that let you “hook into” React state and lifecycle features from function components」官方文档是这么介绍的，翻译过来就是：Hook是一些可以让你在函数组件里“钩入” React state及生命周期等特性的函数。

笔者在react项目中尝试使用DDD方法论，为业务对象建模，以更好的理解和把握业务。本文从对业务的思考、react项目的特征出发，阐述笔者在项目中进行的前端DDD探索，以抛砖引玉，和读者一起思考前端DDD的理解和方法。

三个技巧，让组件为我减少了 18w 次 rerender。

腾讯新闻 TNTWEB 团队推出的新调试工具。

There are two types of values in javascript. Understanding the differences between them gives you Jedi powers in controlling component rendering.

随着前端职能在互联网公司的重要性与日俱增，我们的前端代码库的体积也开始跟着膨胀，特别是基于 React 的应用，Size 常常以兆 (Mb) 计，给渲染的性能优化提出了巨大的挑战。除了体积，还有另一个问题是，在当下的前端同构 SSR 实践中，Server 端的主要用途是执行一些在服务端和客户端都能执行的通用渲染计算，很少能充分发掘 Server 端特有能力的场景。如何降低客户端 JS Size 以及更极致地挖掘服务端的优化能力，成为一个待解决的开放性问题。

Facebook 的 React Team 尝试给出了他们的一个探索方案——React Server Component。一种只运行在服务端的 React 组件化能力，我们来一探究竟。