原文链接：React笔记
1、React
React 是一个用于渲染用户界面 (UI) 的 JavaScript 库。 UI 由按钮、文本和图片等小单元构建而成。 React 允许你将它们组合成可重用、可嵌套的组件。 从网站到手机应用，屏幕上的一切都可以分解成组件。
React是一个将数据渲染为Html视图的JavaScript库
原生Dom操作痛点
- 原生DOM操作通常不够高效，它们会导致多次重排（reflow）和重绘（repaint）。这可能会在频繁的DOM更改时引起性能问题。
- 直接操作原生DOM需要编写大量的DOM操作代码，这可能导致代码的复杂性增加，难以维护。
- 不同浏览器之间的DOM API可能不同，需要编写跨浏览器兼容性代码，这增加了开发的复杂性。
- 原生DOM操作可能更难调试，因为代码直接修改DOM，而React的虚拟DOM可以更容易地追踪和分析。
React特点
- React通过虚拟DOM进行DOM操作，可以显著提高性能。
- React鼓励将界面分解为独立的组件，使得代码更容易维护、测试和重用。
相关React库
- react.js：React核心库
- react-dom.js：提供操作DOM的react扩展库
- babel.min.js：解析JSX语法代码转为JS代码的库
1）构建React
- 创建Html文件
- 添加React渲染的容器
- 引入React环境
<body>
<!--准备虚拟DOM渲染的容器-->
<div id="demo"></div>
<!--引入React的核心库-->
<script type="text/javascript" src="./react-js/react.development.js"></script>
<!--引入React-DMO的核库-->
<script type="text/javascript" src="./react-js/react-dom.development.js"></script>
<!--引入babel-->
<script type="text/javascript" src="./react-js/babel.min.js"></script>
<script type="text/babel"> /*此处一定要写babel*/
</script>
</body>
1、React的核心库必须在react-dom之前引入
2、因为要将JSX翻译成JS，所以
<script type="text/babel">type一定要写成babel
2）创建和渲染虚拟DOM
<script type="text/babel">
/*创建虚拟DOM，使用JSX直接写HTML结构*/
const VDOM = <h1>Hello React</h1>
/*渲染到页面*/
ReactDOM.render(VDOM, document.getElementById("demo"))
</script>
1、创建虚拟DOM，使用JSX不要加引号
2、使用
ReactDOM.render()API 将虚拟DOM渲染到真实DOM上
3）JS创建虚拟DOM*
<script type="text/babel">
/*使用JS创建虚拟DOM*/
const VDOM = React.createElement("h1", {id: "title"}, "Hello React")
/*渲染到页面*/
ReactDOM.render(VDOM, document.getElementById("demo"))
</script>
其中
React.createElement类似于原生的documenu.createElement语法：
React.createElement(标签名，属性，标签内容)
标签嵌套
const VDOM = React.createElement("h1", {id: "title"}, React.createElement("span", {}, "Hello React"))
Dom结构
4）虚拟DOM和真实DOM
我们打印虚拟DOM：
const VDOM = <h1>Hello React</h1>
console.log(VDOM)
发现虚拟DOM就是一个普通的Object对象
下面查看真实DOM
const TDOM=document.getElementById("demo")
console.log(TDOM)
/*通过debugger查看TDOM的属性*/
debugger;
我们发现真实DOM存在大量的属性，这些属性大多都是没用的，而虚拟DOM并不会挂挂载那么多的属性。
2019
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
