React入门

如何引入React

CDN引入

<div id="app"></div>
    <script src="https://cdn.bootcss.com/react/16.10.2/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.10.2/umd/react-dom.development.js"></script>
    <script src="src/index.js"></script>

这是一个例子
https://codesandbox.io/s/boring-smoke-xnvs7?file=/index.html:119-371

cjs和umd的区别cjs和umd的区别

他们都和模块规范有关

cjs全称是CommonJS是node.js支持的模块规范
udm是统一模块规范，兼容各种模块规范（包括浏览器）
理论上先使用udm,同时支持浏览器和node.js
最新的模块规范是使用import和export关键字

create-react-app

类似于vue-cli

yarn global add create-react-app //安装
create-react-app demo1  //在某个地方创建项目文件夹
open .  //mac
start . //window

这个创建好后自动初始化了一个仓库

函数与延迟执行

普通代码
let b=a+1
函数
let f=()=>a+1
let b= f()
区别
普通代码立即求值，读取当前a的值
函数会在调取时求值，即延时求值，且求值时才会读取a的最新值

对比react元素和函数组件

app1=React.creatElement(‘div’,null,n)
app1是React的一个元素
App2=()=>React.creatElement(‘div’,null,n)
app2是React的一个函数组件
区别
app1是立即执行的代码，App2是延迟执行的代码，即是在调用的时候在执行
react元素
creactElement的返回值element可以代表一个div
element并不是真正的div（DOM对象）
所以一般称element为虚拟DOM对象
（）=>react元素
返回一个element的函数，可以代表div
这个函数可以多次执行，每次都会得到最新的虚拟div
react会对比两个div，找出不同，局部更新视图
找不同的算法叫DOM Diff

JSX用法

注意事项

• 注意className

<div className='red'>n</div>会被转译为React.creactElement(‘div’,className:’red’,’n’)只能写className不能写class，class这个关键字不能用在这里

• 插入变量
  标签里所有的js代码都要用{}包起来
  如果要用变量n，那么就要用{}括起来
  如果是使用对象，也要用{}把对象包起来{ {这是一个对象} }
• 习惯在return后面加上()
  一定要记得加括号

  条件判断与循环

  {}括起来写原生js,
  问号冒号表达式
  map
  flater