React基础

171 阅读1分钟

react访问url执行流程

react底层原理

编译时:我们描述一下整个流程,首先通过 React cli 可以是 react-create-app,来编译解析 jsx ,scss/less 等文件,jsx 语法会变成 React.createElement 的形式。最终形成 html,css,js 等浏览器能够识别的文件。

运行时:接下来当浏览器打开应用的时候,会加载这些文件,然后 js 会通过 React 运行时提供的 API 变成 fiber 树结构,接下来就会形成 DOM 树,然后浏览器用 html 作为载体,加入 css 树和 DOM 树,形成渲染树,这样视图就呈现了。

基于编译时的 DSL:

基于运行时 DSL :

参考:

vite搭建react18项目

「React进阶」 React全部api解读+基础实践大全(夯实基础2万字总结)

一名 vueCoder 总结的 React 基础

适合Vue用户的React教程,你值得拥有

适合Vue用户的React教程,你值得拥有(二)

React入门指南

(译)React ⚛️ 新的 Context API

代码简洁之道:编写干净的 React Components & JSX

React.js点滴知识

React —— 组件实例的三大核心属性 state,props,refs

【前端面试题】—30道常见React基础面试题(附答案)

React,优雅的捕获异常

react中为什么建议给setstate传入一个函数而不是对象

一文吃透 React DSL 应用并从零到一实现