卡颂

# Big-React [Big-React](https://github.com/BetaSu/big-react)是一个从0实现React18核心功能的项目。之所以叫`Big-React`而不是`mini-React`，是因为我的目标是逐步实现React18的核心功能，可以跑通对应的官方测试用例，而不是实现简易React。 在做这个项目前我已经写了一本关于React源码的开源电子书 —— [React技术揭秘](https://react.iamkasong.com/)，所以我自信这个项目的完成度会比较高。 ## 特点 首先，代码很方便阅读。按照每个核心功能一个版本，当前已经迭代了7个版本（对应7个 git tag），看每个tag对应代码就能屏蔽其他不相干代码造成的干扰。 其次，调试很方便，提供了3种调试方式。 ### 1. 实时调试 针对不同版本，提供了不同的示例Demo。这种方式的好处是： - 控制台会打印各个主要步骤的执行信息，可以直观看到执行流程 - 热更新（包括示例代码和源码代码） ### 2. pnpm link 将代码打包后link到其他项目中，将项目依赖的`react`与`react-dom`替换为我们打包的`react`与`react-dom`。这种方式的好处是：最贴合项目中实际使用`React`的情况 ### 3. 跑`React`官方的测试用例 当前可跑通25个官方测试用例，随着项目迭代，这个数量会逐步增多。 这种方式的好处是：可以从官方用例的角度观察框架实现的细节、各种边界情况...

## 简介 1. 聊聊`useEffect`的第二个参数如何影响`useEffect`回调函数的执行 2. `useEffect`回调函数与`componentDidMount`的执行时机 [视频在此🙋‍♂️](https://mp.weixin.qq.com/s/ksnXdQ4YT41mPQNzlyKhgA) ## 资料 [聊聊react的生命周期函数](https://github.com/BetaSu/react-interview/issues/2)

## 简介 从调用`this.setState`到视图更新，这个过程是**同步**还是**异步**的？ [视频在此🙋‍♂️](https://www.bilibili.com/video/BV1df4y1C7P9) ## 资料 [在线demo](https://codesandbox.io/s/practical-napier-0lkfe?file=/src/index.js) [Concurrent模式介绍](https://zh-hans.reactjs.org/docs/concurrent-mode-adoption.html) [batchedUpdates源码](https://github.com/facebook/react/blob/17.0.1/packages/react-reconciler/src/ReactFiberWorkLoop.old.js#L1117-L1130) [executionContext === NoContext源码](https://github.com/facebook/react/blob/17.0.1/packages/react-reconciler/src/ReactFiberWorkLoop.old.js#L581-L589)

## 简介 聊聊`React`的**生命周期函数**执行的过程？ [视频在此🙋‍♂️](https://www.bilibili.com/video/BV16t4y1r7oJ) ## 资料  [在线demo](https://codesandbox.io/s/restless-currying-pxz52?file=/src/App.js) [React技术揭秘](https://react.iamkasong.com/)