React的工作原理,为什么我直接从JSBin copy到本地的代码无法执行

简介: React的工作原理,为什么我直接从JSBin copy到本地的代码无法执行

Friday, February 19, 2016 5:41 PM

当时我还纳闷render()里传进去的参数既不是function,也不是string,而是一个html tag,这不是syntax error么?


image.png

看了阮一峰老师的blog才弄懂,


image.png


我之前忘了把browser.js 也copy 到本地。


image.png

Render里面的那个


… 被自动翻译成了JS: React.createElement( … ),

这个broswer.js 是个宝库啊,里面好多大师级的js 用法。。。


image.png

React的source code init时会自动检测Chrome dev tool的react extension装了没,如果没装会在console里打一个message提醒。


image.png


我就在想react咋知道本地安装了extension没。以前看过一篇Chrome extension的step by step创建教程。


其实extension也就是一个js文件。


React里检查一个全局变量是否被赋值,如果否,说明没装。

image.png


这个Chrome extension会自动给该global object赋值:

image.pngimage.pngimage.png

相关文章
|
2月前
|
JSON 缓存 前端开发
【React】React原理面试题集锦
本文集合一些React的原理面试题,方便读者以后面试查漏补缺。作者给出自认为可以让面试官满意的简易答案,如果想要了解更深刻,可以点击链接查看对应的详细博文。在此对链接中的博文作者非常感谢🙏。
37 0
|
4月前
|
存储 资源调度 前端开发
React原理 即 React路由基础
React原理 即 React路由基础
52 1
|
5天前
|
设计模式 前端开发 API
写出易维护的代码|React开发的设计模式及原则
本文对React社区里出现过的一些设计模式进行了介绍,并讲解了他们遵循的设计原则。
|
15天前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
28 0
|
16天前
|
前端开发 数据可视化 UED
React的代码分割:使用React.lazy和Suspense进行性能优化
【4月更文挑战第25天】使用React的`React.lazy`和`Suspense`进行代码分割可优化性能,按需加载组件以提升应用启动速度和用户体验。`React.lazy`接收返回Promise的组件动态导入,而`Suspense`提供加载指示器,保证加载过程中的用户体验。适用于大型组件或路由应用,但需注意服务器配置、避免过度拆分和确保关键代码即时加载。合理运用能显著改善应用性能。
|
18天前
|
存储 人工智能 开发框架
【AI大模型应用开发】【AutoGPT系列】0. AutoGPT概念及原理介绍 - Agent开发框架及ReAct方法
【AI大模型应用开发】【AutoGPT系列】0. AutoGPT概念及原理介绍 - Agent开发框架及ReAct方法
22 0
|
1月前
|
前端开发 JavaScript 算法
React原理
【4月更文挑战第4天】本文介绍了React的核心概念,包括jsx、React.createElement和fiber。jsx是React的语法糖,被转换为React.createElement生成虚拟DOM (vDOM)以优化性能。vDOM是轻量的数据结构,用于描述DOM状态。React通过fiber结构改进渲染性能,将同步任务拆分成小任务,利用requestIdleCallback在浏览器空闲时执行,确保流畅的用户体验。fiber是增强的vDOM,包含额外的引用指针。文章还提及了diff算法和hooks在React中的作用。
11 0
|
1月前
|
存储 JavaScript 前端开发
React中的Redux:简介和实例代码
React中的Redux:简介和实例代码
24 1
|
2月前
|
前端开发 开发者
React Hooks:提升前端开发效率和代码可维护性
传统的 React 类组件在处理状态管理和生命周期函数时存在一些限制,而引入的 React Hooks 技术可以帮助前端开发者更高效地管理组件状态和逻辑,提升代码的可读性和可维护性。本文将介绍 React Hooks 的基本用法及其在实际项目中的应用场景。
|
3月前
|
前端开发 JavaScript
前端框架React原理
前端框架React原理
33 0