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 :
参考:
「React进阶」 React全部api解读+基础实践大全(夯实基础2万字总结)
代码简洁之道:编写干净的 React Components & JSX
React —— 组件实例的三大核心属性 state,props,refs