React 起手式

wbh爱吃西瓜
514 阅读3分钟

1、引入 React

  • CDN 引入 React（注意顺序）（但基本不使用）

  • cjs 和 umd 的区别

    • cjs 全称：CommonJS，是 Node.js 支持的模块规范
    • umd 是统一模块定义，兼容各种模块规范（含浏览器）
    • 理论上优先使用 umd ，同时支持 Node.js 和浏览器
    • 最新的模块使用规范是使用 import 和 export 关键字

  • 通过 webpack 引入 React

    • import ... from ...
      • yarn add react react-dom
      • import React from 'react'
      • import ReactDom from 'react-dom'
      • 可以使用 create-react-app 代替

  • 其他

    • 除了webpack 外，rollup 、parcel 也支持上面写法

  • 新手使用 create-react-app，老手用 webpack / rollup

yarn global add create-react-app   
//全局安装 react和 react-dom
create-react-app react-demo-1
//初始化目录 react-demo-1
cd react-demo-1
//进入 react-demo-1 文件
yarn start

2、关于 6 个 6 面试题

for(let i=0; i<6 ;i++){
    setTimeout(()=>{console.log(i)},1000)
}
//0,1,2,3,4,5

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

3、对比普通代码与函数

  • 这是普通代码
    • let b = 1+a
  • 这是函数（不讨论参数）
    • let f = () => 1+a
    • let b = f()
  • 看出：
    • 普通代码立即求值，读取 a 的当前值
    • 函数会等到被调用的时候再来求值，即延迟求值，且求值时才会读取 a 的最新值

4、对比 React 元素和函数组件

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

5、小结

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

6、JSX - JS 扩展版

  • React 有 JSX
  • jsx-loader 被 babel-loader 取代了
  • 而 babel-loader 被 webpack 内置了

7、使用 JSX

  • 方法一：CDN（不推荐使用）

    • babel.min.js
    • 把 <script> 改成 <script type="text/babel">
    • babel 会自动进行转译（翻译）

  • 忠告：

    • 不要在生产环境使用方法一，效率太低
    • 它要下载一个 babel.min.js
    • 还要在浏览器端把 JSX 翻译成 JS
    • 那为什么不在 build 的时候做呢？

  • 方法二：webpack + babel-loader

  • 方法三：使用 create-react-app

8、使用 JSX 的注意事项

  • 注意 className

    • <div className="red"></div>
    • 被转译为：
    • React.createElement('div', {className:'red'}, 'n')

  • 插入变量

    • 标签里所有的 JS 代码都要用 {} 包起来
    • 如果需要使用变量 n ，就要用 {} 把 n 包起来
    • 如果需要对象，就要用 {} 把它包起来，如 { {name: 'wbh'} }

  • 习惯在 return 后面加上 ()

10、JSX 的循环

  • React 中一般使用 map 来写循环，而不是使用复杂的 for 循环

11、小结

  • React.createElement
    • 创建虚拟 DOM 对象
    • 函数的作用：多次创建虚拟 DOM 对象
    • DOM Diff
  • JSX
    • 将 XML 转译为 React.createElement
    • 使用 {} 插入 JS 代码
    • create-react-app 默认将 JS 当作 JSX 处理
    • 条件判断、循环要用原生 JS 来实现
avatar
文章
阅读
粉丝