一、React入门

郁子大约 3 分钟约 963 字笔记React16.8尚硅谷张天禹

（一）简介

1.官网

2.介绍

  • 用于动态构建用户界面的 JavaScript 库（只关注于视图）
  • 由 Facebook/Meta 公司开源

3.特点

  • 声明式编码
  • 组件化编码
  • React Native 编写原生应用
  • 高效（优秀的 Diffing 算法）

4.React 高效的原因

  • 使用虚拟（Virtual）DOM，不总是直接操作页面真实 DOM
  • DOM Diffing 算法，最小化页面重绘

（二）React 的基本使用

1.相关 JS 库

  • react.js ：React 核心库
  • react-dom.js ：提供操作 DOM 的 React 扩展库
  • babel.min.js ：解析 JSX 语法代码转为 JS 代码的库

2.创建虚拟 DOM 的两种方式

1）JSX 方式

  • 需要 babel 翻译
    • 翻译后其实是 JS 方式的代码
  • babel 功能
    • 将 ES6 语法翻译成 ES5
    • 将 JSX 语法翻译成 JS
<script type="text/babel">
  {
    /* 1.创建虚拟DOM */
  }
  {
    /* const VDom = <h1 id="title">Hello, React</h1>; */
  }
  const VDom = (
    <h1 id="title">
      <span>Hello, React</span>
    </h1>
  );
  {
    /* 2.渲染虚拟DOM到页面 */
  }
  ReactDOM.render(VDom, document.getElementById("test"));
</script>

2）JS 方式

  • 繁琐，几乎不用
<script type="text/javascript">
  // 1.创建虚拟DOM
  // const VDom = ReactDOM.createElement(标签名, 标签属性, 标签内容);
  // const VDom = React.createElement('h1', { id: 'title' }, 'Hello, React');
  const VDom = React.createElement("h1", { id: "title" }, React.createElement("span", {}, "Hello, React"));

  // 2.渲染虚拟DOM到页面
  // ReactDOM.render(虚拟DOM, 容器)
  ReactDOM.render(VDom, document.getElementById("test"));
</script>

3.关于虚拟 DOM

  • 本质是 Object 类型的对象（一般对象）
  • 虚拟 DOM 比较“轻”，真实 DOM 比较“重”
    • 因为虚拟 DOM 是 React 内部在用，无需真实 DOM 上那么多的属性
  • 虚拟 DOM 最终会被 React 转化为真实 DOM，呈现在页面上

（三）React-JSX

1.XML

  • XML 早期用于存储和传输数据
<student>
  <name>Tom</name>
  <age>19</age>
</student>

2.JSON

  • XML 存储方式较繁琐，改用 JSON 格式
{
  "name": "Tom",
  "age": 19
}

1）JSON 内置的两个方法：

  • parse() ：将 JSON 字符串解析为 JS 中的数组和对象
  • stringfy() ：将 JS 中的数组和对象转换为 JSON 字符串

3.JSX 语法规则

1）定义虚拟 DOM 时，不要写引号

2）标签中混入 JS 表达式时要用 {}

3）样式的类名指定不要用 class ，要用 className

  • 为了避开 class 定义类的关键字

4）内联样式要用 style={{ key: value }} 的形式

  • key 为小驼峰命名
  • 第一个{}表示 style 内要写 JS 表达式
  • 第二个{}表示这是一个对象

5）虚拟 DOM 的根标签只能有一个

6）标签必须闭合

7）标签首字母

  • 小写字母开头
    • 将该标签转为 html 中同名元素，若 html 中无该标签对应的同名元素则报错
  • 大写字母开头
    • React 则渲染对应的组件，若组件未定义则报错

4.区分【JS 表达式】和【JS 语句（代码）】

1）表达式

  • 一个表达式会产生一个值，可以放在任何一个需要值的地方
    • a
    • a+b
    • demo(1)
    • arr.map()
    • function test() {}

2）语句（代码）

  • if() {}
  • for() {}
  • switch() { case: xxx }

（四）模块与组件、模块化与组件化的理解

1.模块

  • 理解：向外提供特定功能的 js 程序，一般就是一个 js 文件
  • 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂
  • 作用：复用 js，简化项目编码，提高运行效率

2.组件

  • 理解：用来实现局部功能效果的代码和资源的集合（html/css/js/image 等等）
  • 为什么：一个界面的功能更复杂
  • 作用：复用编码，简化项目编码，提高运行效率

3.模块化

  • 当应用的 js 都以模块来编写时，这个应用就是一个模块化的应用

4.组件化

  • 当应用是以多组件的方式实现，这个应用就是一个组件化的应用
上次编辑于: