React运行机制是如何一步步实现组件渲染和状态更新的？

本文共计3111个文字，预计阅读时间需要13分钟。

目录+适合人群+写源码之前的准备知识点+JSX+虚拟DOM+原理简介+手写React过程+基本架构搭建+React源码+ReactDOM.render+ReactDOM.Component+简单源码+适合人群+中文适配0.5~3年的React开发者

目录

• 适合人群
• 写源码之前的必备知识点
• JSX
• 虚拟Dom
• 原理简介
• 手写react过程
• 基本架子的搭建
• React的源码
• ReactDom.render
• ReactDom.Component
• 简单源码

适合人群

本文适合0.5~3年的react开发人员的进阶。

讲讲废话：

react的源码，的确是比vue的难度要深一些，本文也是针对初中级，本意了解整个react的执行过程。

写源码之前的必备知识点

JSX

首先我们需要了解什么是JSX。

网络大神的解释：React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

是的，JSX是一种js的语法扩展，表面上像HTML，本质上还是通过babel转换为js执行。