阅读 18

React 的初识

React 是一个用于构建用户界面的 JavaScript

引入React

CND 引入

进入 reactreact-dom,选择合适的版本,复制入文件中即可 (不推荐使用)

cjsumd的区别

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

webpack 引入

引入 reactreact-dom 即可(不推荐新手使用,需要配置 webpack

yarn add react react-dom

import React from 'react'
import ReactDOM from 'react-dom'
复制代码

create-react-app

终端输入 yarn global add create-react-app xxx 即可在当前目录创建一个 xxx 目录文件,安装完成之后进入文件并打开即可(推荐新手使用)

JSX

Vue 中有 vue-loader,React 中有 JSX,你以为是 jsx-loader,其实不然,webpack 中内置 jsx-loaderbabel-loader 替代了

使用 JSX

  • 使用 CND

    • 引入 babel.min.js
    • <script> 改成 <script type="text/babel">
    • babel 会自动进行转译
  • 使用 webpack + babel-loader

    需要配置,不推荐使用

  • 使用 create-react-app

    当你用这种方法引入 React 的时候,就默认的使用了 jsx 语法

注意事项

  • 使用 className,而不是 class

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

    React.createElement

    • createElement 的返回值 element 是一个虚拟 DOM 对象

    ()=>React.createElement

    • 返回 element 的函数,可以代表一个 div
    • 这个函数可以多次执行,每次得出最新的虚拟 div
    • React 会对比两个虚拟 div ,找出不同,局部更新视图
    • 找不同的方法叫做 DOM Diff 算法
  • 标签里面的所用 JS 代码都要用花括号包起来

    <div>{n>5? 'n大于5' : 'n小于5' }</div>

  • 使用变量要用花括号包起来

    <div>{n}</div>

  • 需要使用对象要用花括号包起来

    {{name:'jack'}}

  • return 后面一定要加括号

文章分类
前端
文章标签