最近投入了一个需求，遇到一个需要用动画去实现的场景。我们的产品大大管它叫氛围气泡，在很多应用（淘宝、抖音、bilibili）的直播间场景都会有类似这样营造氛围感的组件，能够让你感知到其他用户在当前直播间的行为。

React16 架构分为三层，Scheduler用来调度任务，Reconciler找出变化的组件后将它们交给Renderer，由Renderer将其渲染到页面上。本文将从源码角度聊一聊 render 阶段和 commit 阶段的工作流程。

Canvas动画，从DOM到React。

对于函数组件的 re-render，大致分为三种情况。本文将详细介绍这三种情况的原理与优化。

With the recent update to Rust, it is time to relook at using Rust and React together. I have a new found love for Rust and everything it can do as a language. One of its more impressive features is its ability to write WebAssembly(Wasm) without much overhead. I have explored how to use Rust to write Wasm before (Blog post coming soon!). But I wanted to see how easy it would be to integrate it into a standard React workflow.

本文介绍了一套在 React Native 应用中实施可视化埋点的方案。

Being the first to build an App Clip in React Native that was going to be surfaced to millions of Shopify's Shop app users each day proved to be a challenging task.

WebGL is the magic sauce behind Solar Storm , an audio-reactive music video that renders live in the browser. After fumbling around with…

原文：When to useMemo and useCallback 性能优化总是会有成本，但并不总是带来好处。我们来谈谈 useMemo 和 useCallback 的成本和收益。

React Hook feature was first introduced on React 16.8 update and became immensely popular among developers due to its capabilities. It allows you to hook into React state and lifecycle features. And, sometimes, it could be challenging when using it for advanced use cases.

In this article, I’ll discuss 5 common React Hooks mistakes every developer should avoid when building robust React applications.

React Query brings the ergonomics of GraphQL clients to RESTful APIs. It scratched my itch.

Getting a whole company onto a new way of writing the API layer is hard and there's real work to do. React Query offers the perfect middle ground.

Keep the RESTful API you're used to, get the request deduping, data caching, loading states, re-fetching, and hooks ergonomics you dream of. ?

You can use those same ergonomics for any slow operation. Doesn't have to be an API call.

React Hooks 带来了很多好处，同时也引入了一些困扰。常见的问题有： 为什么我的 useEffect 比我预期执行多得多？为什么 useCallback / useMemo 的返回值总是发生变化？

于是开发了这样的一个工具，配合 React Devtool 使用，在代码块中可视化地展示出 React 函数组件的属性及内部变量的变化情况，可以方便地定位到哪些值总是在发生变化。

在单独使用 TypeScript 时没有太多的坑，不过和React结合之后就会复杂很多。本文就来聊一聊TypeScript与React一起使用时经常遇到的一些类型定义的问题。

本文从源码角度就全新的React Fiber架构和大家聊一聊Diff算法。

如果熟悉React的话，你在使用Flutter的时候肯定会充满即视感，其实这一点也不奇怪，实际上Flutter官方就提到在设计Flutter时受到了React的影响。对于熟悉React的前端开发人员来说，从与React对比开始入门想必是相对来说比较轻松的一个方式。

Flutter与React，两者都作为一个声明式UI框架，都遵循UI = f(state)的理念，加之Flutter本身就参考了React，所以两者有大量相似的地方。下面我们从编写一个经典前端入门应用Todo List开始我们的Flutter之路。

本文主要讲两部分内容，一是介绍大致的render函数执行的主流程，包括挂载和渲染jsx节点，对内部调用的函数进行讲解；另一个是细化render阶段做的一些重要内容，包括Fiber的内部计算和任务调度的相关内容。