专家建议别学React，还是Vue香...

虚拟DOM（Virtual Document Object Model）

• DOM的本质：DOM是浏览器中的概念，用js对象来表示页面上的元素，并提供操作DOM对象的API
• React中的虚拟DOM的本质：虚拟DOM是框架中的概念，是程序员用js对象来模拟页面上的DOM和DOM嵌套
• 虚拟DOM的目的：为了实现页面中DOM元素的高效更新

数据渲染：

• 全部重新渲染：如表格价格数据排序，从数据库中查询到的数据以对象数组的形式存放到了浏览器的内存中，点击排序之后，把内存中的对象数组重新排序，再把最新的对象数组重新渲染到页面，该方案可能有些数据并没有任何变化但又重新被渲染了，存在性能问题
• 按需渲染：只重新渲染更新的数据所对应的页面元素，该方案性能最优

实现数据的按需更新：

• 原理：获取内存中的新旧两颗DOM进行对比，得到需要被按需更新的DOM元素

• 获取：浏览器中并没有直接提供获取DOM树的API，因此我们无法拿到浏览器内存中的DOM树

• 模拟：程序员可以手动模拟新旧两颗DOM树（这就是React中虚拟DOM的概念）

  <div id="mydiv" title="人名" data-index="0">
  	小明
  	<p>哈哈哈</p>
  </div>
  

  var div={
  	tagName: 'div',
  	attrs:{
  		id: 'mydiv'
  		title: '人名',
  		'data-index'; '0'
  	},
  	childrens:[
  		'小明',
  		{
  			tagName: 'p',
  			attrs: {},
  			childrens:[
  				"哈哈哈"
  			]
  		}
  	]
  }
  

  var div={
  	tagName: 'div',
  	attrs:{
  		id: 'mydiv'
  		title: '人名性别',
  		'data-index'; '0'
  	},
  	childrens:[
  		'小明',
  		{
  			tagName: 'p',
  			attrs: {},
  			childrens:[
  				"哈哈哈qwq"
  			]
  		}
  	]
  }
  

Diff算法：

• tree diff：新旧两颗DOM树，逐层对比的过程，就是Tree Diff，当整颗DOM逐层对比完毕，则所有需要被按需更新的元素必然能够找到
• component diff：在进行Tree Diff的时候，每一层中组件级别的对比，叫做Component Diff
  • 如果对比前后，组件的类型相同，则暂时认为此组件不需要被更新
  • 如果对比前后，组件的类型不同，则需要移除旧组件，创建新组件并追加到页面上
• element diff：在进行组件对比的时候，如果两个组件的类型相同，则需要进行元素级别的对比，这叫做Element Diff
  

React脚手架

• 全局安装脚手架：npm install -g create-react-app
• 创建项目：create-react-app helloworld
• 启动项目：npm run start

jsx语法

创建虚拟DOM元素：

const mydiv = React.createElement( ‘div’, { id: ‘mydiv’ , title: ‘这是一个div’ } , ‘div内容’ )

ReactDOM.render( mydiv , document.getElementById(‘root’) )

• 介绍：jsx就是符合xml规范的js语法（语法格式相对来说要比HTML严谨很多）

• 本质：并不是直接把jsx渲染到页面上，而是内部先转换成了createElement形式再渲染

• 语法：

  将普通字符串数组转为jsx数组并渲染到页面上：

  方法1：forEach()

  方法2：map()

  let a = 10
  let str = "哈哈哈"
  let boo = false
  let title = "888"
  //jsx元素
  const h1 = <h1>哈哈哈</h1>
  //jsx元素数组
  const arr = [
    <h1>这是h1</h1>,
    <h2>这是h2</h2>
  ]
  //普通字符串数组
  const arrStr = ['喜洋洋','懒洋洋','灰太狼']
  const nameArr = []
  arrStr.forEach(item=>{
    const temp = <h2 key={item}>{item}</h2>
    nameArr.push(temp)
  })
  ReactDOM.render(
  <div> 
    {a + 2} 
    {str}
    {boo ? "条件为真" : "条件为假"}
    <p title={title}>ppp</p>
    {h1}
    {arr}
    {nameArr}
    {arrStr.map(item=><h2 key={item}>{item}</h2>)}
  </div>, document.getElementById("root"));
  

• jsx写注释：

  • 单行注释：{ // 这是注释 }
  • 多行注释：{ /* 这是注释 */ }

• 需要使用className来替换class，htmlFor替换label的for属性

• 当编译引擎在编译jsx代码的时候，如果遇到了<那么就把它当作HTML代码去编译，如果遇到了{}就把花括号内部的代码当作普通js代码去编译

本文地址：https://blog.csdn.net/weixin_53430951/article/details/112596674