【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

javascript 复制代码

<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.<script type="text/babel"></script> 一定要写babel
3.创建虚拟DOM时不写引号，这是jsx的写法
4.渲染虚拟DOM的语法：ReactDOM.render(虚拟DOM, 容器)

示例：

javascript 复制代码

<!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(标签名, 标签属性,标签内容)

javascript 复制代码

const VDOM = React.createElement('h1', {id: 'title'}, 'Hello, React')

2.JSX方式：原始JS写法的语法糖

javascript 复制代码

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练习

示例图：

javascript 复制代码

<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表达式】

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式：

html 复制代码

1). a
2). a + b
3). demo(1) 函数调用表达式
4). arr.map()
5). function test() {}

语句(代码)
下面这些都是语句：

html 复制代码

1). if(){}
2). for(){}
3). switch() {case: xxx}

4.模块与组件、模块化与组件化的理解

模块： 一个JS文件就是一个模块，作用：复用JS，简化JS，提高JS运行效率。
组件： 用来实现局部功能效果的代码和资源的集合（html/css/js/image 等等），作用：简化项目编码，提高运行效率。
模块化： 当应用的JS都是以模块化编写的，就是一个模块化的应用
组件化： 当应用是以多组件的方式实现，就是一个组件化的应用