React 的初识

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

引入React

CND 引入

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

cjs和umd的区别

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

webpack 引入

引入 react 和 react-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-loader 被 babel-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 后面一定要加括号