本文共 3114 字，大约阅读时间需要 10 分钟。

目录

• 如何引入React
• 函数的本质——延迟
• JSX的用法
• 条件判断与循环

1.如何引入React

1.1 CDN引入(很麻烦,没人用)

• 操作

  1.需要引入两个库,注意顺序
  2.react、react-dom
  —react.development.js
  —react-dom.development.js
  3.引入这两个库之后就可以使用自己的JS文件

• 项目默认可以使用parcel来运行

// 对象console.log(window.React);// 函数console.log(window.React.createElement);// 对象console.log(window.ReactDOM);// 函数console.log(window.ReactDOM.render);

• cjs和umd的区别
  1.cjs全称CommonJS,是 Node.js 支持的模块规范
  2.umd是统一模块定义,兼容各种模块规范
  2.理论上优先使用umd.同时支持Node.js和浏览器
  4.最新的模块规范是使用 import 和 export 关键字
• 模块规范
  如何声明一个模块
  1.直接写代码 const
  2.然后导出 export Default 函数名
  3.这就是声明一个可以被别人导入的模块

1.2 webpack引入React（了解）

• import…from…
  1.yarn add react react-dom
  2.import Read from 'react'
  3.import ReactDOM from 'react-dom'
  注意大小写
  也很麻烦，需要配置webpack
• 使用：create-react-app代替

1.3 如何正确引入React

• 新人：create-react-app
  老手：webpack/rollup自己配置
• 安装
  yarn global add create-react-app
  不用npx，在window上兼容性不好
• 新建文件

create-react-app my-appcd my-appyarn startstart . //打开当前文件夹

• CDN引入的React都会变成全局变量

  window.React
  

• 使用React创建一个div

  const App = window.React.createElement('div',{className:'red'},n)
  1.创建一个div，class为red，里面内容为n
  2.元素属性放到第二个参数，内容用 { } 括起来
  3.所有div里面的东西都放到第三个参数中，内容可以用 [ ] 括起来

• 多个React.createElement可以嵌套

//多个createElement嵌套使用//创建一个class为red的div，里面内容为n和一个添加了点击事件监听的buttonconst App = () =>  React.createElement("div", {    className: "red" }, [    n,    React.createElement(      "button",      {           onClick: () => {             n += 1;          //这里调用App的返回值div，会重新读n的值          ReactDOM.render(App(), root);        }      },      "+1"    )  ]);

• 一个小tip
  JS中设置class就是用className，class是一个关键字
• ReactDOM.render(App(), root);
  将App渲染到页面中的root元素中

2.1 App为什么是个函数

• 一开始采用App为一个表示div的对象，里面包含button
  渲染：ReactDOM.render(App, root);
• 问题：即使添加了onClick事件，但依旧没办法执行+1操作
• 原因：
  1.当App是一个对象的时候，一开始等于App=React.create…的时候，当时就计算出n的值，此时n=0。
  2.然后进行点击事件后n虽然此时为1，对象App中的0已经和n无关了，它已经是App中的值了，并没进行二次渲染
  3.因此要将App变成函数，因为函数在调用的时候会重新去读n的值
  4.ReactDOM.render(App(), root);中render的是App函数返回的div，执行App的时候会重新去读n的值，就能得到最新的n

2.2 6个6

let ifor(i=0;i<6;i++){     setTimeout(()=>{   console.log(i)},1000)}

• 一秒钟之后打印出6个6，因为函数执行时遇到外部变量会去读取其最新的值
  1.函数是在调用的时候执行
  2.也就是调用的时候去计算 i
• setTimeout(fn,1000)
  请在1000ms之后，尽快执行fn
  不是在1000ms之后执行fn，注意区别
• 解法一：语法糖for(let i = 0 ; i<6 ; i++)
  相当于：在函数作用域内声明一个中间变量 j
  1.let j = i ; 打印出 j
  2.当 i 不同时，函数作用域不同，则局部变量 j 为不同的值，就不会被之前的值替代，因此由6个 j，打印出来则不同
  （全局变量只有一个，局部变量可以有多个）
  3.JS根据这个思路创造了这个语法糖
• 解法二：用立即执行函数
  1.写一个函数，立即执行：!function(j){}(i)
  2.在前面加一个感叹号，就可以阻止报错
  3.给函数传一个实际参数 i，那函数就会把i的值复制给形式参数 j
  4.这里 j 和 i 只是复制值的关系，没什么其他关系，因此 j 也可以取名 i

for(var i=0;i<6;i++){     !function(j){       setTimeout(()=>{   console.log(j)},1000)  }(i)}

2.3 函数与延迟执行

• 普通代码
  let b = 1+a
• 函数
  let f = ()=>1+a
  let b = f()
  相当于把1+a包起来，需要的时候再取值
• 区别
  1.普通代码：立即求值，读取a当前的值
  2.函数会等调用时再求值，即延迟求值。且求值时才会读取a的最新值

2.4 React元素和函数组件

• 对比
  App1 = React.createElement('div',null,n)：App1是一个 React 元素
  App2 = ()=> React.createElement('div',null,n)：App2是一个 React 函数组件
• 启示
  1.函数App2是延迟执行代码，会在被调用的时候执行
  2.这里的说是代码执行的时机，不是说同步和异步
  （同步和异步：关注的是得到结果的时机）

3.小结

• React 元素
  1.createElement 的返回值 element 可以代表一个 div
  2.但 element 并不是真正的 div（DOM对象）
  3.所以一般称 element 为 虚拟DOM 对象
• ()=> React 元素
  1.返回 element 的函数，也可以代表一个 div
  2.这个函数可以多次执行，每次得到一个最新的 虚拟div
  3.React 会对比两个 虚拟div，找出不同，局部更新视图
  4.找不同的算法叫做：DOM Diff 算法

转载地址：http://ikdhz.baihongyu.com/