React引入——React初次使用

YuyuanW
1,408 阅读5分钟

文章内容：

    1. 如何引入React
    1. 函数的本质——延迟执行
    1. JSX的用法
    1. 条件判断与循环

一、如何引入React

cdn引入

这种引入比较麻烦

引入使用示例

Copy：

CDN 链接 – React (reactjs.org)

Run：

A.cdn需要引入两个链接，

  • 一个是umd/react.development.js
  • 另一个是umd/react-dom.development.js 运行可以用parcel来运行

B.检查引入是否成功

console.log(window.React)
console.log(window.React.createElement)
console.log(window.ReactDOM)
console.log(window.ReactDOM.render)

这四个对象能在控制台被正常打印出，才说明引入成功。

  • 说明： umd是模块规范，还有个是cjs。模块规范：声明如何写一个js的。优先使用umd

Modify：

bug：
  • ①codesanbox使用失败，几个都无法打印出
    • 使用的时候codesanbox不是自动保存，要先保存后再使用
    • react-dom的使用，是window.ReactDOM，后面dom三个字母都是大写
  • ②jsbin中不知道如何引入react-dom
    • react-dom的使用，是window.ReactDOM，后面dom三个字母都是大写
  • ③尽可能用官网提供的cdn吧，最近bootcdn不好用

webpack引入React

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

React引入对比

  • 新手使用create-react-app
  • 老手自己配置使用webpack/rollup

create react app引入React

Copy：

facebook/create-react-app: Set up a modern web app by running one command. (github.com)

Run：

  • yarn global add create-react-app //安装
  • cd <安装的目录>
  • create-react-app react-demo //新建react目录
  • cd ./react-demo
  • yarn start //运行react
  • 然后就可以vscode运行这个目录了
  • import React from 'react'
bug:
  • 新建react目录报错，命令换成yarn create react-app react-demo-1
  • 换命令后还是报错，于是将bash换成cmd运行新建项目命令，然后yarn start . 成功启动

二、初步使用React

用react实现+1

前置知识：

  • 对createElement的使用
  • 对render将新增节点渲染进渲染界面的理解
  • createElement与页面渲染

  1. 对createElement的使用 createElement会创建一个Dom节点，这个函数的参数了解，第一个写'标签名'，然后写{标签属性}，然后写[内容值]就行了。

  2. 对render渲染界面的理解 通过createElement创建的对象为虚拟DOM对象，createElement后的节点不在页面中，通过render将其插入页面的Dom中，这个函数的参数，前面写create的子节点，后面写根节点。

  3. createElement与页面渲染 react和vue不同，vue会帮你监听元素，但是react的渲染后就结束了，不管你内部元素的变化了。

react初体验

<div id="root"></div>

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>

<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<script src="src/index.js"></script>

然后使用react来写js

const React = window.React
const ReactDOM = window.ReactDOM
const root = document.querySelector('#root')
let n=0
const App = React.createElement('div',{className:'red'},[
    n,
    React.createElement('button',{
    onClick : ()=>{
        n += 1
        }
    },"+1")
])
ReactDOM.render(App,root)

浅写下css

.red{
    color : red;
}

react的监听与刷新

graph TD
点击发现n的值并未改变 --> click后数据中的n是否变化n变化后是否被监听到 --> 没有监听到则需要添加监听改变一次就需要重新渲染一次 --> n添加监听页面的n还是没有改变 --> 刷新页面储存的n

运行会发现，n的值还是0，所以，数据中的n变了吗？

如果n变了，但是页面没有显示出变化，就是说render只读取初次n值0。

在onClick中添加console.log(n)后试验发现，打印出的n值是变化的。

那就在n变化后render重新渲染。在n+=1后渲染页面加上ReactDOM.render(App,root)

发现还是没有用，render只认第一次读取到了n值就给它固定了，于是把createElement写出函数调用的形式。这里不理解可以通过let+setTimeout辅助理解

const React = window.React
const ReactDOM = window.ReactDOM
const root = document.querySelector('#root')
let n=0
const App =()=> //为了刷新数据
React.createElement('div',{className:'red'},[ 
    n,
    React.createElement('button',{
    onClick : ()=>{
        n += 1;
        ReactDOM.render(App(),root)  //为了增加对n的监听
        }
    },"+1")
])
ReactDOM.render(App(),root)

三、函数与延迟执行

通过React使用时需要添加监听和手动写函数刷新，此时，我们应该思考一下函数的本质。

学习Vue只需要对着文档学习语法就行了，但是学习React需要对js有深入的了解。

比较普通变量与函数

let a =2
let b = a+2 
console.log('1',b)

fn=()=>{b = a+2}
a=4
fn()
console.log('2',b)

也就是函数并不会立即执行，只有等到调用的时候才执行，调用的时候才开始读取a的值，所以我们刷新页面的n的值的时候，可以把App写成函数。

const App = ……
const App =()=> //为了刷新数据 ……

React会对比两个不同的虚拟DOM的element，然后局部刷新页面。

React和Vue是两种不同的编程模型。

image.png

bug:

在返回的React对象用{}包起来了。就是错误写法如下：

const App = ()=> {React.createElement}

正确写法为：

const App = ()=> React.createElement

四、JSX的用法

前置知识：

JSX是啥?

X表示扩展，JSX就是JS的扩展版。

对比：

Vue有vue-loader React有jsx

实际上jsx被babel-loader代替了，并且Babel-loader被webpack内置

JSX的作用：

  • 将XML转义成React.createElment
  • 使用{}插入js语法
  • create-react-app默认将js当作jsx处理
  • 条件判断和循环要用原生的js实现

1. cdn引入jsx

Copy：

在网站中添加 React – React (reactjs.org)

Run：

<body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="src/index.js"></script>
    
    <script type='text/babel'>
        let n =0
        const App = ()=>{
        <div>
            {n}
            <button className='red' (onClick=()=>{
                n+=1,
                render()
                }>
                +1
            </button>
        </div>}
        render=()=>{
            ReactDOM.render(<App/>,document.querySelector('#app'))
        }
        render()
    </script>

 
</body>

Modify：

  • cdn引入React、ReactDOM和JSX
  • 在html中写 <script type='text/babel'></script>
  • 而babel中的语法，React.createElement直接写一个匿名函数，然后render的时候写<App/>
  • class用className代替，变量用{}，return后接()

2. webpack+babel-loader

新手可以直接跳过

3. 使用create-react-app

A.新建react项目

  • yarn global add create-react-app
  • create-react-app <项目名>
  • yarn start

B.用vscode打开使用，此时webpack内置了Babel-loader

image.png

image.png

image.png

五、条件判断与循环控制

在JSX中如何使用if-else

对比：

  • 在Vue中必须根据Vue提供的语法来写
  • 但是在React中按照js语法，你想怎么写就怎么写

Vue中的条件判断

    <template>
        <div v-if='n%2===0'>n是偶数</div>
        <div v-else>n是奇数</div>
    </template>

Reaxt JSX中的条件判断

import React from 'react'
const Component = ()=>{
    return (
        <div>
            {n%2===0 ? <div>n是偶数</div> : <div>n是奇数</div>}
        </div>
)
}
export default Component

Vue中写循环语句 Vue中可以遍历数组和对象

<template>
    <div v-for='(n,index) in arr'> :key='index'
        值{{n}},对应的下标为{{index}}
    </div>
</template>

在React中

const Component = (props)=>{
    return (props.numbers.map((n,index)=>{
        return (
            <div>值{n},对应的下标为{index}</div>
        )}
      )
    )
}
avatar
文章
阅读
粉丝