1.与Augular1相比,React设计很优秀,一切基于js并且实现了组件化开发的思想
2.开发团队实力强悍,不必担心断更的情况
3.社区强大,很多问题都能找到对应的解决方案
4.提供了无缝转到ReactNative上的开 发体验,让我妈技术能力得到了拓展,增强了我们的核心竞争力
5.很多企业中,前端项目技术选型采用的是React.js;
虚拟DOM的本质是:浏览器中的概念,用js对象来表示页面上的元素,并提供了操作DDOM对象的API;
什么是react中的虚拟DOM:是框架中的概念,是程序员用js对象来模拟页面上的DOM和DOM嵌套
为什么要实现虚拟DOM:为了实现页面中,DOM元素的高效更新
<div id="mydiv" title="说实话" data-index="0">
哈哈
<p>haha</p>
</div>
</body>
<script>
var div={
tagName:'div',
attrs:{
id:'mydiv',
title:'说实话',
'data-index':'0'
},
childrens:[
'哈哈',
{
tagName:'p',
attrs:{},
childrens:[
"haha"
]
}
]
}
</script>
一.使用React渲染最基本的虚拟DOM到页面上
安装包;
1.react:专门用于创建组件和虚拟dom的,同事组件的生命周期都在这个包中
react-dom:专门进行DOM操作的,最主要的应用场景就是ReactDOM.render()
eg.index.html
<body>
<div id="app"></div>
</body>
index.js
import React from 'react';//创建组件,虚拟DOM元素,必须这么写
import ReactDOM from 'react-dom';//把创建好的组件和虚拟DOM放到页面上展示的
//创建虚拟DOM元素
//参数1:创建的元素的类型,字符串,表示元素的名称
//参数2:是一个对象或null,表示当前这个DOM元素的属性
//参数3:子节点(包括 其它虚拟DOM获取文本子节点)
//参数n:其它的子节点
//<h1 id="myh1" title="this is a h1">这是h1<h1>
//const myh1=React.createElement('h1',null,'这是h1')
const myh1=React.createElement('h1',{id:'myh1',title:'this is a h1'},'这是1h1')
//3.使用ReactDOM把虚拟DOM渲染到页面上
//参数1:要渲染的那个虚拟DOM元素
//参数2:指定页面上de DOM元素,当做容器
//第二个参数接收的是一个DOM元素而不是选择器
ReactDOM.render(myh1,document.getElementById('app'))
二.页面展示字符串,将普通字符串数组,转为jsx数组并渲染到页面上
js文件中可以写html代码
index.js
方案一:在外部进行for循环
let a=10;
let b='你还'
const arrStr=['毛利兰','柯南','小五郎','灰原哀']
//定义一个空数组,将来用来存放 名称 标签
const nameArr=[]
arrStr.forEach(item=>{
const temp=<h5>{item}</h5>
nameArr.push(temp)
}
)
ReactDOM.render(<div>
{ a + 2}
<hr/>
{b}
<hr/>
{nameArr}
</div>,document.getElementById('app'));
结果:
方案二:在内部进行for循环
let a=10;
let b='你还'
const arrStr=['毛利兰','柯南','小五郎','灰原哀']
ReactDOM.render(<div>
{ a + 2}
<hr/>
{b}
<hr/>
<hr/>
//{arrStr.map(item=>{
// return <h3>{item}</h3>
//}
//)}
{arrStr.map(item=><div key={item}><h3 >{item}</h3></div>
)}
</div>,document.getElementById('app'));
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
注意对于代码中是否加分号,这个取决于你是否喜欢,喜欢加就加,不喜欢加就不加。但是如果下一行是以 [,(,+,-,/开头的这行必须要加分号。
第一种创建组件的方式在
创建组件
function Hello(){
return <div>Hello 组件</div>
}
index.js文件中
为组件传递数据:
function Hello(props){
//如果在一个组件中return一个null。则表示此组件是空的,什么都不会渲染
//在组件中,必须返回一个合法的JSX虚拟DOM元素
//props.name='zs'
console.log(props)
//结论:不论是vue还是react,组件中的props永远都是只读的,不能被重新赋值
return <div>这是Hello组件--- {props.name}--- {props.age}---{props.gender}</div>
}
页面渲染:
const dog={
name:'大黄',
age:3,
gender:'熊'
}
ReactDOM.render(<div>
123
<Hello name={dog.name} age={dog.age} gender={dog.gender}></Hello>
</div>,
document.getElementById('app')
);
通过es6的方式展开运算符
function Hello(props){
//如果在一个组件中return一个null。则表示此组件是空的,什么都不会渲染
//在组件中,必须返回一个合法的JSX虚拟DOM元素
//props.name='zs'
console.log(props)
//结论:不论是vue还是react,组件中的props永远都是只读的,不能被重新赋值
return <div>这是Hello组件--- {props.name}--- {props.age}---{props.gender}</div>
}
const dog={
name:'大黄',
age:3,
gender:'熊'
}
ReactDOM.render(<div>
123
<Hello {...dog}></Hello>
</div>,
document.getElementById('app')
);
var o2={
age:22,
address:'北京',
phone:'139999'
}
var o1={
name:'zs',
...o2
}
注意:组件的首字母必须要大写。