react起手式

xiaoyuAnd
173 阅读2分钟
  • 一、如何引入react
  • 二、函数的本质--延迟
  • 三、JSX的用法
  • 四、条件判断与循环

一、如何引入react

1、从CDN引入React

先引入React：

<script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.min.js"></script>

然后引入ReactDOM：

<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script>

cjs与umd的区别：

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

2.通过webpack引入React

import...from..

  • yarn add react react-dom
  • import React from 'react'
  • import ReactDOM from 'react-dom'

实现一个简单的功能+1：

const React = window.React;const ReactDOM = window.ReactDOM;let n = 0;const App = () => //把APP变成函数  React.createElement("div", null, [    n,    React.createElement(      "button",      {        onClick: () => {          n += 1;          console.log(n); //这一句是精髓          ReactDOM.render(App(), document.querySelector("#app")); 
           // 为什么还是不能重新渲染，加个括号就可以实现了        }      },      "+1"    )  ]);ReactDOM.render(App(), document.querySelector("#app"));

这时候React会使我们深一步的思考，函数的本质

组件二、函数的本质--延迟

//这是普通代码
let b = 1 + a

//这是函数，不考虑参数
let f = () => 1 + a
let b = f()

普通代码立即求值，读取a的当前值
函数会等调用再求值，既延时求值。且求值时才会读取a的最新值

对比React元素和函数组件

App1 = React.createElement('div' , null , n);这是一个React元素

App2 = () => React.createElement('div' , nll , n);这是一个React函数组件

启发：

App2是一个延时执行的代码，会在被调用的时候执行（是执行时机，不是异步、同步。异步、同步是关注得到结果的时机）

小总结：

React元素

  • createElement的返回值element可以代表一个div
  • 但是element不是真正的div（DOM对象**）**
  • 一般称element为虚拟DOM对象

() => React元素

  • 返回的element的函数，也可以代表一个div元素
  • 这个函数可以多次执行，每次得到最新的虚拟div
  • React会对比两个虚拟div，找出不同，局部更新视图
  • 找出不同的算法叫做DOM Diff

三、JSX

x表示扩展，所以JSX就是js的扩展版

Vue有vue-loader

  • .vue文件里面写
avatar
文章
阅读
粉丝