React 简介

React 是什么⽤于构建⽤户界⾯的 JavaScript 库,举个例⼦

发送请求获取数据
处理数据
操作DOM呈现⻚⾯ React 只负责第3步
⼀个将数据渲染为HTML视图的开源JavaScript库

谁开发的

由Facebook开发, 并且开源

历程

起初由Facebook的软件⼯程师Jordan Walke创建。
于2011年部署于Facebook的newsfeed。
随后在2012年部署于Instagram。
2013年5⽉宣布开源。
近⼗年的发展, 正在被腾讯, 阿⾥等⼀线⼤⼚⼴泛使⽤

为什么要学

原⽣JS的痛点:

document.getElementById('app')
document.querySelector('#app')
document.getElementByTagName('span')

原⽣JavaScript操作DOM繁琐、效率低( DOM-API操作UI)。
使⽤JavaScript直接操作DOM，浏览器会进⾏⼤量的重绘重
原⽣JavaScript没有组件化编码⽅案，代码复⽤率低。

React的特点:

采⽤组件化模式、声明式编码，提⾼开发效率及组件复⽤率。
在React Native中可以使⽤React语法进⾏移动端开发。
使⽤虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。

真实Dom与虚拟Dom的⽐较:

⼀个TodoList的例⼦:
dom元素准备：

<ul id='list'></ul>

数据生成视图：

// 数据集合
let todoList = [
{id: 1, title: '吃饭'},
{id: 2, title: '睡觉'},
]
// 定义用于拼接的字符串
let htmlStr = ''
// 拼接todoList字符串列表
todoList.forEach((item) => {
htmlStr += `<li>${item.title}</li>`;
})
// 操作Dom, 更新界面
document.getElememtById('list').innerHTML = htmlStr

使⽤原⽣JS, 每次都会渲染所有数据, 假如现在已经渲染了100条, 如果⼜增加了⼀条数据, 那么会重新渲染, 即渲染101条。
已渲染的数据不能复⽤, 造成性能浪费。

React使⽤虚拟Dom
1.先创建虚拟的Dom, 再把虚拟Dom变为真实的Dom
2.当有数据增加时, 先对⽐虚拟Dom是否有改变, 没有改变的直接复⽤, 有改变的进⾏调整⽐如渲染了100条, ⼜增加了1条, 对⽐前100条的虚拟Dom没有变化, 直接复⽤, 只需要重新渲染新增加的⼀条即可

学习之前要掌握的JavaScript知识

判断this的指向
class(类)
ES6语法规范
npm包管理器
原型、原型链
数组常⽤⽅法
模块化

Hello React

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 容器 -->
<div id="test"></div>
<!-- 核心库 -->
<script src="../js/react.development.js"></script>
<!-- 用于支持React操作Dom -->
<script src="../js/react-dom.development.js"></script>
<!-- jsx转js -->
<script src="../js/babel.min.js"></script>
<!-- 这里一定要写babel -->
<script type="text/babel">
    // 1. 创建虚拟Dom
    const VDOM = <h1>Hello</h1> // jsx语法不写引号
    // 2. 渲染虚拟Dom到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>

两种创建虚拟DOM的方式

1.使用jsx创建虚拟DOM

 // 1.jsx语法
const  VDOM = <h1 id="title"><span>hello</span></h1>
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('test'))

2.适用js创建虚拟DOM

// 1.js创建虚拟DOM
const  VDOM = React.createElement('h1', {id: 'title'}, React.createElement('span', {id: 'title'}, 'hello'))
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('test'))

虚拟DOM与真实DOM

1.React提供了⼀些API来创建⼀种 “特别” 的⼀般js对象:

const VDOM = React.createElement('xx',{id:'xx'},'xx')

上⾯创建的就是⼀个简单的虚拟DOM对象
2.虚拟DOM对象最终都会被React转换为真实的DOM
3.我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM 变化⽽更新界。
关于虚拟DOM:

本质是Object类型的对象(一般对象)
虚拟DOM比较轻, 真实DOM比较重, 因为虚拟DOM是React内部在用
虚拟DOM最终会被React转化为真实DOM, 呈现在页面上

jsx语法规则

什么是 jsx?

全称: JavaScript XML
react定义的⼀种类似于XML的JS扩展语法: JS + XML
作⽤: ⽤来简化创建虚拟DOM jsx本质是React.createElement(component,props,...children) ⽅法的语法糖

1)写法：var ele = <h1>Hello JSX!</h1>
2)注意1：它不是字符串, 也不是HTML/XML标签
3)注意2：它最终产生的就是一个JS对象

标签名任意: HTML标签或其它标签
标签属性任意: HTML标签属性或其它
基本语法规则

1)遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需\
要特别解析
2)遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{}包含

babel.js的作⽤

1)浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
2)只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

jsx语法规则:

定义虚拟DOM时,不要写引号
标签中混入JS表达式时,要用{}
样式的类名指定不要用class, 要用className
内联样式要用style={{key:value}}的形式去写
根标签只能有一个
标签必须闭合
标签首字母 a. 若小写字母开头, 则将该标签转为html中同名元素, 若html中无同名元素, 则报错。
b. 若大写字母开头, react就去渲染对应的组件, 若组件没有定义, 则报错。
jsx案例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
    .title {
    background: bisque;
    }
</style>
</head>
<body>
<!-- 容器 -->
<div id="test"></div>
<!-- 核心库 -->
<script src="../js/react.development.js"></script>
<!-- 用于支持React操作Dom -->
<script src="../js/react-dom.development.js"></script>
<!-- jsx转js -->
<script src="../js/babel.min.js"></script>
<!-- 这里一定要写babel -->
<script type="text/babel">
let id = 'title'
let data = 'hello'
// 1. 创建虚拟Dom
const VDOM = (
<div>
    <h1 className="title" id={id}>
    <span style={ {color: 'red', fontSize: '33px'} }>{data }</span>
    </h1>
    <input />
</div>
) // jsx语法不写引号
// 2. 渲染虚拟Dom到页面
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>

一定注意区分: js语句(代码)与js表达式

表达式: 一个表达式会产生一个值, 可以放在任何一个需要值的地方
1.a
2.+b
3.demo(1)
4.arr.map()
5.function test() {}
语句(代码)
1.if(){}
2.for(){}
3.switch(){case:xxx}

一、React学习笔记整理（初步认识React）