【React全解】React起手式

如何引入React

从bootcdn引入React

1. 按顺序引入React
   
2. 然后引入React DOM
   

Common JS VS UMD

规范JavaScript的模块定义和加载机制,降低了学习和使用各种框架的门槛，能够以一种统一的方式去定义和使用模块，提高开发效率，降低了应用维护成本

CommonJS

• CommonJS是一种规范，NodeJS是这种规范的实现
• CommonJS模块是对象，是运行时加载，运行时才把模块挂载在exports之上（加载整个模块的所有），加载- 模块其实就是查找对象属性。
• CommonJS是同步加载（代码在本地，加载时间基本等于硬盘读取时间）

UMD

• UMD（Universal Module Definition）是AMD和CommonJS的糅合，兼容AMD和CommonJS，还支持老式全局变量定义, 是跨平台的解决方案
• AMD模块以浏览器第一的原则发展，异步加载模块。
• CommonJS模块以服务器第一原则发展，选择同步加载，它的模块无需包装(unwrapped modules)。
• UMD先判断是否支持Node.js的模块（exports）是否存在，存在则使用Node.js模块模式。再判断是否支持AMD（define是否存在），存在则使用AMD方式加载模块

通过webpack引入React

yarn add react-dom
*********
import React from  'react',
import ReactDom from 'react-dom'

除了使用webpack外，也可以使用rollup,parcel引入react

新手引入VS老手引入

安装react：yarn global add create-react-app
新手使用命令行create-react-app .
老手使用webpack,rollup

代码实例

******************
const React = window.React;
const ReactDOM = window.ReactDOM;

let n = 0;
const App = () =>
  React.createElement("div", null, [
    n,
    React.createElement(
      "button",
      {
        onClick: () => {
          n += 1;
          console.log(n);
          ReactDOM.render(App(), document.querySelector("#app")); // 为什么还是不能重新渲染
        }
      },
      "+1"
    )
  ]);

ReactDOM.render(App(), document.querySelector("#app"));

函数的本质-延迟

函数的本质就是延迟执行代码，定义的时候不会被执行，只有在被调用的时候执行

普通代码和函数
例子

普通代码let a = 1 + 1
函数代码let f=()=>1 + a; let b=f()

区别

• 普通代码会立即求值，读取a的当前值
• 函数会等到调用该函数的时候再求值，即延迟求值，求值的时候会读取a的最新值

React元素和函数组件

例子

App1 是一个React元素
app1 = React.createElement('div', null, n)

App2 是一个React函数组件
App2 =()=> React.createElement('div', null, n)

• 元素组件是立即求值的代码, 只会运行一次，读取写入属性
• 函数组件是延迟执行的代码，会运行很多次，在被调用的时候执行

虚拟DOM对象和DOM Diff算法

• React元素
  在React元素中createElement的返回值element可以代表一个div, 但是div并不是真正的div，即真正的DOM对象

• React函数组件
  在React函数组件中，如果函数的createElement的返回了element，也可以代表一个div，这个函数可以多次执行，每次得到最新的虚拟DOM节点。React会对比两个虚拟DOM节点，找出不同，局部更新视图。一般称这种算法为DOM Diff算法。这种算法节约了资源，加速了视图的更新。

JSX

JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的, JSX会将XML转译为React.createElement

Vue VS React

Vue有vue-loader

• Vue文件中写