【React学习笔记】第一章：React入门
1.React介绍
中文官网： https://react.docschina.org/
英文官网：https://reactjs.org/
1.1 React是什么
react是一个用于构建用户界面的开源JavaScript库。（操作DOM呈现页面）
由Facebook的软件工程师 Jordan Walke创建，于2011年部署于Facebook 的 newsfeed；2012年 部署于 Instagram；2013年 5 月宣布开源。
1.2 React的特点：
1.采用组件化模式、声明式编码，提高开发效率及组件复用率。
- 声明式： 只需要描述UI（HTML）看起来是什么样，就和写HTML一样。React负责渲染UI，并在数据变化时更新UI
- 基于组件： 组件是react最重要的内容，组件表示页面中的部分内容。组合、复用多个组件，可以实现完整的页面功能
2.在React Native中可以使用 React 语法进行移动端开发。(JS可以写出来IOS\Android)
两种手机平台： IOS（OC Swift）、Android（java）
3.高效：使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。
2.React的基本使用
2.1 相关JS库
1.babel.min.js：作用是将jsx 转为 js
2.react.development.js：react的核心库，引入后全局有React对象
3.react-dom.development.js：react的扩展库，引入后全局有ReactDOM对象
用React官网CDN链接下载 react库
常用js库下载BootCDM
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
2.2 Hello react
注意：
1.react核心库要在react-dom之前引入
2. 一定要写babel
3.创建虚拟DOM时不写引号，这是jsx的写法
4.渲染虚拟DOM的语法：ReactDOM.render(虚拟DOM, 容器)
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello_react</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test"></div>
<!-- 引入react核心库，全局多了React对象 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作dom，全局多了ReactDOM对象 -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 此处一定要写babel,写的是jsx代码,由babel翻译 -->
<script type="text/babel">
// 1.创建虚拟DOM
const VDOM = <h1>Hello, React</h1>/* 此处不写引号，因为不是字符串 */
// 2.渲染虚拟DOM到页面: ReactDOM.render(虚拟DOM, 容器)
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>
2.3 创建虚拟DOM的两种方式
1. 纯JS写法：React.createElement(标签名, 标签属性,标签内容)
const VDOM = React.createElement('h1', {id: 'title'}, 'Hello, React')
2.JSX方式：原始JS写法的语法糖
const VDOM = (
<h1 id="title">
<span>Hello, React</span>
</h1>
)
2.4 虚拟DOM与真实DOM
关于虚拟DOM
1.本质是Object 类型的对象(是React在内存中用于描述UI的JS对象)
2.虚拟DOM属性少，真实DOM属性多，因为虚拟DOM是React内部在用，无需那么多属性
3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上
3.JSX语法
JSX不是标准的ECMAScript语法，它是ECMAScript的语法扩展，需要使用babel编译处理后才能在浏览器中使用。
create-react-app 脚手架中已经默认有该配置，无需手动配置
编译JSX语法的包为：@babel/preset-react
3.1JSX语法规则
- 定义虚拟DOM时，不要写引号
- 标签中混用JS表达式，使用{}
- 样式的类名指定不要用class, 要用className
- 内联样式，要使用
style={{key:value}}，属性名转为小驼峰 - 只能有一个根标签
- 标签必须闭合
- 标签首字母
1).小写字母开头,则将该标签转为html中同名元素;若html中无该标签对应的同名元素则报错
2).大写字母开头,react就去渲染对应的组件, 若组件没有定义则报错 - 关于注释：{/* */}
3.2 JSX练习
示例图：
<body>
<!-- 准备好一个容器 -->
<div id="container"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
const title = '前端JS框架列表'
const data = ['Angular','React', 'Vue']
const VDOM = (
<div>
<h2>{title}</h2>
<ul>
{
data.map((item, index) => {
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
ReactDOM.render(VDOM, document.getElementById('container'))
<body>
总结：
1.JSX可以自动遍历数组，但是无法展示Object结构且会报错"Object are not valid as a React child"
2.{}中只能写JS表达式，不能写JS语句
3.注意区分： 【JS语句】与【JS表达式】
- 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式：
1). a
2). a + b
3). demo(1) 函数调用表达式
4). arr.map()
5). function test() {}
- 语句(代码)
下面这些都是语句：
1). if(){}
2). for(){}
3). switch() {case: xxx}
4.模块与组件、模块化与组件化的理解
模块： 一个JS文件就是一个模块，作用：复用JS，简化JS，提高JS运行效率。
组件： 用来实现局部功能效果的代码和资源的集合（html/css/js/image 等等），作用：简化项目编码，提高运行效率。
模块化： 当应用的JS都是以模块化编写的，就是一个模块化的应用
组件化： 当应用是以多组件的方式实现，就是一个组件化的应用