react 从入门到实践之基础总结一
一、为什么要学习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的初体验，代码如下所示：
<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>Documenttitle>
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方式，代码如下所示：
<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>Documenttitle>
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中注释语法：{/* 中间是注释的内容 */}