社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
数据渲染:
实现数据的按需更新:
原理:获取内存中的新旧两颗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算法:
npm install -g create-react-app
create-react-app helloworld
npm run start
创建虚拟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代码去编译
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!