React 简介及其基本使用

相关概念：

插件： 别人写好的第三方库

xxx 插件： jQuery 插件  /  react 插件

全家桶： 核心库 + 相关插件

构建项目： 对项目源码 进行 编译、合并、压缩......处理，生成能让浏览器高效运行的打包文件

构建用户界面： 显示带数据的界面（将数据以页面的形式展现出来）

jQuery 库： 直接操作 DOM，只是简化封装成了函数，是一个函数库。

React 库： 间接操作 DOM，通过修改状态数据刷新界面，组件化的编程思想

模块化编程： 一个 js 就是一个模块，项目代码由多个模块构成。

界面： html、css 实现的

功能： js 实现的

React Native 可以用开发原生应用 APP

一个 图片 的显示： 由内存的数据被浏览器解析 DOM 元素对象 渲染到页面

轻量级对象： 属性少 ---- 虚拟 DOM 元素对象

重量级对象： 属性多 ---- 原生 DOM 元素对象

React

用于动态构建 用户界面 的 javascript 库，由 Facebook 开源

特点：

声明式： 无需直接操作 DOM，只需更新页面数据对应的状态数据，即可更新页面

组件化编程： 每个界面功能完成的部分(html、css等所有资源)称之为 "组件"

作用： 简化、复用

组件使用：

一次学习，随处使用： 可以一套代码实现跨平台应用 (支持客户端与浏览器渲染)

高效： 只需操作虚拟 DOM，框架会映射到原生 DOM，采用了 DOM Diff 算法，最小化页面重绘

单数据流

基本使用：

1. 使用 CDN 引入 React 16.7

<script src="https://cdn.bootcss.com/react/16.7.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.7.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.js"></script>

注意:  在浏览器中使用 Babel 来编译 JSX 效率是非常低的____页面运行过程中编译

产品版，应该是使用构建工具，提前将源码编译成正常的源码

2. 引入插件

操作 DOM 的插件

Babel 将 ES6 转 ES5，将 jsx 转换成 js

3. 写代码（浏览器解析之前，babel 会将 jsx 代码转换成 js 代码）

// 使用 jsx 语法 创建虚拟 DOM

<script type="text/babel">    // 声明使用 babel 解析 jsx 为 js

const vDOM = <h2 id={myId} name={myName}>{content}</h2>;

// 然后渲染 

ReactDOM.render(vDOM, document.getElementById("test"));

// 创建虚拟 DOM 的 非 jsx 语法 步骤

const vDOM  = React.createElement('h2', {id:"myWords", name: "kjf"}, "Hello React.");

// 然后渲染

ReactDOM.render(vDOM, document.getElementById("test"));

// 插入页面前： 根据虚拟 DOM 生成原生 DOM

// 将内存的虚拟 DOM元素渲染到页面的原生 DOM 容器中

jsx

<h2 id={myId} name={myName}>{content}</h2>;

全称：JavaScript XML

react 定义的一种类似于 XML 的 js 扩展语法 XML + js

标签、属性、文档 与 html 的相对应

作用： 创建 react 虚拟 DOM 元素对象

注意：

不是字符串，而是最终产生一个对象。虚拟 DOM 元素对象

debugger

动态展示列表数据

js

• /**** 虚拟 DOM 标签数组
  const lis = [
      <li>Thor</li>,
      <li>Stark</li>,
      <li>Hock</li>,
  ]
  const ul = (
      <ul>
          {lis}
      </ul>
  );
  ****/
  
  const names= ["Thor", "Stark", "Hock"]
  
  // 创建虚拟 DOM
  const ul = (
      <ul>
          {
              names.map(
                  (each, index)=><li key={index}>{each}</li>
              )
          }
      </ul>
  )
  
  // 渲染 DOM
  ReactDOM.render(ul, document.getElementById("outer"))

代码地址： kiss me.