React

网站导航

• facebook/react (opens new window)
• react.js (opens new window)
• 30-seconds-of-react (opens new window)
• https://esprima.org/demo/parse.html# (opens new window)
• https://astexplorer.net/ (opens new window)
• https://babeljs.io/repl (opens new window)
• overreacted (opens new window)
• useEffect 完整指南 (opens new window)
• 为什么 React 元素有一个$$typeof 属性？ (opens new window)
• 将 React 作为 UI 运行时 (opens new window)

React15 架构可以分为两层：

• Reconciler（协调器）—— 负责找出变化的组件

• Renderer（渲染器）—— 负责将变化的组件渲染到页面上

React16 架构可以分为三层：

• Scheduler（调度器）—— 调度任务的优先级，高优任务优先进入Reconciler

• Reconciler（协调器）—— 负责找出变化的组件 （render 阶段）

• Renderer（渲染器）—— 负责将变化的组件渲染到页面上 (commit 阶段)

cli

• create-react-app (opens new window)
• react-app-rewired (opens new window)
• craco (opens new window)

router

• react-router (opens new window)

React16中的setState是同步还是异步

https://vue3js.cn/interview/React/setState.html (opens new window)

• 在组件生命周期或React合成事件中，setState是异步
• 在setTimeout或者原生dom事件中，setState是同步

libs

• mobx (opens new window)
• awesome-mobx (opens new window)
• DvaJS (opens new window)
• umiJS (opens new window)
• nextjs (opens new window)
• ramda (opens new window)
• lodash (opens new window)
• RxJS (opens new window)
• react-loadable-visibility (opens new window)
• react-spinkit (opens new window)
• remix (opens new window)

hooks

• awesome-react-hooks (opens new window)
• hooks.umijs.org (opens new window)

参考文档

• react-transition-group (opens new window)
• styled-components (opens new window)
• hoist-non-react-statics (opens new window)
• classnames (opens new window)
• React 源码解析 (opens new window)
• React 技术揭秘 (opens new window)
• 详解 requestIdleCallback (opens new window)
• react live (opens new window)
• 「React进阶」 React 全部 api 解读+基础实践大全 (opens new window)
• 图解react (opens new window)
• 100行代码实现React核心调度功能 (opens new window)
• React 框架运行时优化方案的演进 (opens new window)
• web前端面试 - 面试官系列 (opens new window)