React教程文档:入门教程: 认识 React – React
构建用户界面(视图层)的JavaScript库,不是框架。(react全家桶是框架)
核心思想:关注点分离
发展:html/css/js=>vue:组件化开发template style script=>react:all in js
目录
1.jsx
2.element
3.element-update
4.虚拟DOM
1.准备容器
2.引入库 注意顺序:react-dom依赖于react,先引入react再引入react-dom
引入babel解析jsx,将jsx语法转化为浏览器能识别的代码
3.jsx=>js扩展语法,可以在js中写类似于html语法格式
// jsx=>element元素:构成react应用的最小单元
//jsx=>element=>component-components=>app
var e =
hello world
//元素打印出是是普通的js对象=>虚拟DOM(本质js对象)
console.log(e)
4.将虚拟DOM渲染到真实DOM容器中
//ReactDOM react元素(虚拟DOM)同步(优化算法)真实DOM
ReactDOM.render(e,document.getElementById("app"))
1.变量
const name = "react"
var element =
hello {name}
2.计算
var element =
hello {2020+1}
3.jsx语法中调用函数
var user = {
firstName:"Less",
lastName:"Yu"
}
function formatName(user){
return user,firstName + "-" + user.lastName}
var element =
hello {formatName(user)}
4.函数中使用jsx语法
//函数
function formatName(user){
return user,firstName + "-" + user.lastName}
//函数中有jsx
function greeting(user){
if(user){
//函数中jsx语法{ }调用普通函数
return
hello {formatName(user)}
}
else{
return
hello stranger
}
}
//数据
var user = {
firstName:"Less",
lastName:"Yu"
}
const element = greeting(user)
5.属性绑定
属性:驼峰式命名 class=>className for=>htmlFor
const e =
hello world
var user = {
firstName:"Less",
lastName:"Yu",
avator:"(图片链接太长了,假装有图片链接)"
}
const element =
const element =
6.绑定样式
样式值默认单位:px
var style = {width:100,height:100};
var user = {
firstName:"Less",
lastName:"Yu",
avator:"(图片链接太长了,假装有图片链接)"
}
const element =
const element =
{{width:100,height:100}}>嵌套两层
7.包含元素
const element =
hello
world
//报错:JSX express must have one parent element
const element =
//正确书写格式hello
world
8.转义(ReactDOM实现)
var str = "strong man";
//转义:<a>string man </a>
//相当于:真实DOM中
<a>string man </a>//如果不进行渲染的话,浏览器直接识别为链接,属于开发时的漏洞,会被攻击
//作用:防止XSS攻击,保证安全性
var str2 = "strong man"
var element =
dangerouslySetInnerHTML= { { __html:str2} }>const element =
{str}9.for循环+element
var element =
- zs
- ls
- ww
- zl
var names = ["zs","ls","ww","zl"]
let eArray = [];
for(let i = 0;i
eArray.push(
{name[i]} }
function getElements(){
let eArray = [];
for(let i = 0;i
eArray.push(
{name[i]} }
return eArray
}
var element =
{eArray}
//react中name既不是保留字也不是关键字
this.name = ["zs","ls"]
console.log(typeof name) //输出string
//window本身有name属性,是字符串类型,window.name只能接受字符串
注意:不要在全局作用域中使用name,局部作用域中可以使用name
//将虚拟DOM渲染到真实DOM容器里面
ReactDOM.render(element,document.getElementById("app"))
1.immediate元素=>react元素是不可改变对象(快照)
var element =
Clock
{ new Date().toLacalTimeString() }
2.创建时间元素,同步DOM
function tick(){
//创建时间元素
var element =
Clock
{ new Date().toLacalTimeString() }
console.log(element)
//状态比较 js对象比较 虚拟DOM比较 =>react只更新变化的部分=>优化=>减少重绘面积=>性能更好(vue与react的差别)
//元素同步真实DOM
ReactDOM.render(element,document.getElementById("app"))
}
//每隔一秒执行一次,实现时钟效果
setInterval(tick,1000)
0.jsx语法规定
var element =
hello1.type="text/babel" => babe-preset-react-app解析jsx语法
2.React.createElement => 生成虚拟DOM
var element = React.createElement("div",{
className:"title",
style:{ color:"red" }
},"hello");
console.log(element) //js对象
3.虚拟DOM分析
{
props:{
children:"hello",
className:"title",
style:{ color:"red" }
},
type:"div"
}
查看真实DOM
const trueDOM = document.querySelector("title")
console.dir(trueDOM)
4.将虚拟DOM转化为真实DOM=>渲染到容器中
注意:转化真实DOM只转化变化部分,减少了重绘面积,减少重绘次数
ReactDOM.render(element,document.getElementById("app"))
真实DOM和虚拟DOM对比:
创建虚拟DOM相当于创建普通对象,相对来说,开销极小
5.渲染带浏览器 (html=>视图)
hello