react 从入门到实践之基础总结一
一、为什么要学习React前言,选择任何一门语言学习都是有时间和金钱的成本的,那么 React 值得学习。学习的必要性,如下所示:使用组件化开发方式,符合现代 Web 开发的趋势;企业前后端项目分离,唯有 React 是首选;技术成熟,社区完善,配件齐全,适用于大型 Web 项目(生态系统健全);由 Facebook 专门的团队维护,技术支持可靠;ReactNative - Learn once,
·
一、为什么要学习React
- 前言,选择任何一门语言学习都是有时间和金钱的成本的,那么
React
值得学习。 - 学习的必要性,如下所示:
- 使用组件化开发方式,符合现代
Web
开发的趋势; 企业前后端项目分离,唯有React
是首选; - 技术成熟,社区完善,配件齐全,适用于大型
Web
项目(生态系统健全); - 由
Facebook
专门的团队维护,技术支持可靠; ReactNative - Learn once, write anywhere: Build mobile apps with React
;- 使用方式简单,性能非常高,支持服务端渲染;
React
使用前端技术非常全面,有利于整体提高技术水平;此外,有利于求职和晋升,有利于参与潜力大的项目;
二、React快速入门
- 概念介绍,如下所示:
React
起源于Facebook
的内部项目,因为该公司对市场上所有JavaScript MVC
框架,都不满意,就决定自己写一套,用来架设他们自己的Instagram
的网站。- 做出来以后,发现这套东西很好用,在
2013年5月
开源了。目前已经成为前端的三大主流框架。
React
是什么,如下所示:
React
是用于构建用户界面的JavaScript
库,围绕React
的技术栈主要包括:React, redux, react-redux, react-router, .....
React
官网:https://reactjs.org/
,React
中文:https://react.docschina.org/
React
具备的特点,如下所示:
- 使用
JSX
语法创建组件,实现组件化开发,为函数式的UI
编程方式打开了大门; - 性能高:通过
diff
算法 和 虚拟DOM
实现视图的高效渲染和更新; - 声明式、组件化、一次学习,随处编写;
-
React
核心,虚拟DOM
和Diff
算法。 -
对于虚拟
DOM
,如下所示:
- 虚拟
DOM
,React
将DOM
抽象为虚拟DOM
,虚拟DOM
其实就是用一个对象来描述DOM
,通过对比前后两个对象的差异,最终只把变化的部分重新渲染,提高渲染的效率; - 为什么用虚拟
DOM
?当DOM
发生更改时需要遍历DOM
对象的属性, 而原生DOM
可遍历属性多达200
多个个, 而且大部分属性与渲染无关, 导致更新页面代价太大; - 虚拟
DOM
的处理方式,如下所示:- 1)用
JS
对象结构表示DOM
树的结构,然后用这个树构建一个真正的DOM
树,插到文档当中。 - 2)当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异。
- 3) 把记录的差异应用到步骤1所构建的真正的
DOM
树上,视图就更新了。
- 1)用
- 对于
Diff
算法,如下所示:
- 最小化页面重绘;
- 当我们使用
React
在render()
函数创建了一棵React
元素树,在下一个state
或者props
更新的时候,render()
函数将会创建一棵新的React
元素树; React
将对比这两棵树的不同之处,计算出如何高效的更新UI
(只更新变化的地方),此处所采用的算法就是diff
算法;
三、React初体验
- 对于
React
的初体验,代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/html">
// 1.获取页面真实的容器元素
const containerDiv = document.getElementById('app')
// 2. jsx语法创建虚拟DOM对象
const vDom = <div>React</div>
// 3. 将虚拟DOM渲染到页面元素上去
ReactDom.render(vDom, containerDiv)
</script>
<script type="text/babel">
const vDom = <div>React</div>
ReactDom.render(vDom, document.getElementById('app'))
</script>
</body>
</html>
JSX
语法入门,往容器中插入一个span
标签,class
为:"react"
, 内容为:"React"
。对此,有两种实现方式,通过典型js
方式和JSX
方式,代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app1"></div>
<div id="app2"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script>
// 通过典型js方式
// 1. 创建变量
let myClass = 'react'
let myContent = 'React'
// 2. 创建DOM
const vDom = React.createElement('span', {className: myClass}, myContent)
// 3. 将虚拟DOM渲染到页面元素上去
ReactDom.render(vDom, document.getElementById('app1'))
</script>
<script type="text/babel">
// JSX方式
const vDom1 = <span className={myClass.toUpperCase()}>{myContent}</span>
ReactDom.render(vDom1, document.getElementById('app2'))
</script>
</body>
</html>
- 对于插入标签的总结,如下所示:
JSX
只是高级语法糖, 最终执行时还是会被转成原生js
, 通过babel
等方式;- 更加语义化, 更加直观, 代码可读性更高;
- 性能相对原生方式更加好一些
- 对于
JSX
常见的界面操作方式,如下所示:
- 多重标签嵌套,代码如下:
<script type="text/html">
ReactDom.render(
<div>
<h2>多重标签嵌套</h2>
<p>测试</p>
</div>
, document.getElementById('app'))
</script>
js
中的变量, 表达式要写在{}
内,代码如下:
<script type="text/html">
const str = 'react'
ReactDom.render(
<div>
<span>{str}</span>
<p>10+2*4={10+2*4}</p>
</div>
, document.getElementById('app'))
</script>
- 内联样式通过对象方式引入,代码如下:
<script type="text/html">
const myStyle = {
backgroundColor: 'purple',
color: 'yellow',
fontSize: 30
}
ReactDom.render(
<div>
<h2>颜色</h2>
<div style={myStyle}>测试</div>
</div>
, document.getElementById('app'))
</script>
- 数组遍历,代码如下:
<script type="text/html">
const dataArr = [
{name: '周杰伦', age: 38},
{name: '谢霆锋', age: 40},
{name: '刘德华', age: 48}
]
const vDom = (
<ul>
{
dataArr.map((data, index) =>
<li key={index}>{index+1} --- {data.name}:{data.age}</li>
)
}
</ul>
)
ReactDom.render(vDom, document.getElementById('app'))
</script>
- 对于
JSX
常见的界面操作方式,总结如下所示:
JSX
中添加属性时,使用className
代替class
, 像label
中的for
属性,使用htmlFor
代替;JSX
创建DOM
的时候,所有的节点,必须有唯一的根元素进行包裹;JSX
语法中,标签必须成对出现,如果是单标签,则必须自闭合;- 在
JSX
中可以直接使用JS
代码,直接在JSX
中通过{}
中间写JS
代码即可; - 在
JSX
中只能使用表达式,不能出现语句; - 在
JSX
中注释语法:{/* 中间是注释的内容 */}
更多推荐
已为社区贡献3条内容
所有评论(0)