【React】全家桶项目实践-一一网

**这是我参与更文挑战的第3天，活动详情查看：更文挑战
**

为什么要学习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月开源了。目前已经成为前端的三大主流框架。

1.1 什么是React?

React是用于构建用户界面的JavaScript 库，围绕React的技术栈主要包括：React, redux, rect-redux, react-router, …..

React官网：reactjs.org/

React中文：react.docschina.org/

React有哪些特点：

使用JSX语法创建组件，实现组件化开发，为函数式的 UI 编程方式打开了大门;
性能高：通过 diff算法和虚拟DOM 实现视图的高效渲染和更新;

JSX –> HTML

JSX –> native ios或android中的组件（XML）

JSX –> VR/AR

JSX –> 区块链/物联网

JSX –TO–> EveryThing

React核心：虚拟DOM 和 Diff算法

1.2 简单了解虚拟DOM?

React将DOM抽象为虚拟DOM，虚拟DOM其实就是用一个对象来描述DOM，通过对比前后两个对象的差异，最终只把变化的部分重新渲染，提高渲染的效率。

为什么用虚拟DOM?

当DOM发生更改时需要遍历DOM对象的属性, 而原生DOM可遍历属性多达200多个个, 而且大部分属性与渲染无关, 导致更新页面代价太大。

虚拟DOM的处理方式？

1）用 JS对象结构表示 DOM 树的结构，然后用这个树构建一个真正的 DOM 树，插到文档当中。

2）当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异。

3）把记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。

1.3 简单了解Diff算法？

最小化页面重绘

当我们使用React在render() 函数创建了一棵React元素树，在下一个state或者props更新的时候，render() 函数将会创建一棵新的React元素树。

React将对比这两棵树的不同之处，计算出如何高效的更新UI（只更新变化的地方），此处所采用的算法就是diff算法。

二、React初体验

2.1 JSX语法全面入门

1) Demo1: 往容器中插入一个span标签, 设置clssName和myCnotent。两种实现方式: a) 通过典型js方式; b) JSX方式?

典型JS方式
1，创建虚拟DOM
const Dom = React.createElement('span',{className:myClass},myContent);
2.渲染虚拟DOM
ReactDom.render(vDom,document.getElementById('app'));

JSX方式
1、创建虚拟DOM
const Dom = <span ClassName = {myClass.toUpperCase()}{myContent}></span>
2、渲染虚拟DOM
ReactDOM.render(Dom,document.getElementById('app'))
复制代码

总结:

1. JSX只是高级语法糖, 最终执行时还是会被转成原生js, 通过babel等方式;

2. 更加语义化, 更加直观, 代码可读性更高;

3. 性能相对原生方式更加好一些!

2) Demo2: JSX常见的界面操作方式?

a. 多重标签嵌套

核心代码如下:

ReactDOM.render( 
<div>
    <h2>多层标签嵌套</h2>
    <img src=""  width="200" />
    <p></p>
</div>
document.getElementById('app'))
复制代码

b. js中的变量, 表达式要写在{}内

核心代码如下:

ReactDOM.render( 
<div>
    <p>{2+5+6}</p>
</div>
document.getElementById('app'))
复制代码

c. 内联样式通过对象方式引入

核心代码如下:

const MyStyle={
    backgroundColor:'blue',
    color:'green',
    fontSize:20
}
ReactDOM.render( 
<div>
    <p style={MyStyle}>颜色</p>
</div>
document.getElementById('app'))
复制代码

d. 数组遍历

核心代码如下:

const Arr=[
    {name:'周杰伦',age:38},
    {name:'刘德华',age:48}
]
ReactDOM.render( 
<ul>
    {Arr.map(
        (data,index)=><li>{index+1}-姓名：{data.name},年龄：{data.age}岁</li>
    )}
</ul>
document.getElementById('app'))
复制代码

页面效果展示:

1-姓名：周杰伦，年龄：38岁

2-姓名：刘德华，年龄：48岁

案例总结如下:

1. JSX中添加属性时，使用 className 代替 class , 像label中的for属性，使用htmlFor代替；

2. JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹；

3. JSX语法中，标签必须成对出现，如果是单标签，则必须自闭和；

4. 在 JSX 中可以直接使用 JS代码，直接在 JSX 中通过 {} 中间写 JS代码即可；

5. 在 JSX 中只能使用表达式，不能出现语句；

6. 在 JSX 中注释语法：{/* 中间是注释的内容 */}。