React初学01

lnn520
107 阅读3分钟

如何引入react???

1. 从CDN引入（按照顺序）

  1. 引入http://.../react.x.min.js
  2. 引入http://.../react-dom.x.min.js

cjs和umd的区别

  1. cjs全称CommonJS，是Node.js支持的模块规范
  2. umd是统一模块定义，兼容各种模块
  3. 理论上优先使用umd，同时支持Node.js和浏览器
  4. 最新的模块规范是使用import和export

通过webpack引入React

  1. yarn add react react-dom
  2. import React from 'react'
  3. import ReactDom from 'react-dom'
  4. 注意大小写

用react实现+1

比较难代码

  1. 失败的原因APP = React.create...只执行了一次
  2. 如何让他重新执行，以获取n的最新值？

6个6

let i 
for(i=0;i<6;i++){
setTimeout(()=>{console.log(i)},1000)
}

对比普通代码和函数

这是普通代码

let = 1+a

这是函数（）

let = ()=>1+a
let b =f()

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

对比React元素和函数组件

对比

APP1 =React.createElement('div',null,n)

  • app1是一个React元素
  • APP2 = ()=>React.creatElement('div',null,n)
  • app2是一个函数组件

启示

  • 函数APP2是延时执行的代码，会在被调用的时候执行

目前我知道的

react元素

  • createELement的返回值element可以代表一个div
  • 但是element并不是真正的div(dom)对像
  • 所以我们一般称element为虚拟dom对象

()=>React元素

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

JSX

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

vue有 vue-loader

  • vue文件里写<template><script><style>
  • 通过vue-loader变成一个构造选项

react有 JSX

  • 把 <button onClick='add'>+</button>变成React.createElement('button',{onClick...},'+1')

使用JSX

方法一: CDN

  • 引入babel.min.js
  • 把<script>改成<script type="text/babel">
  • babel会自动进行转译(可以理解为翻译) tip: 永远不要在生产环境使用方法一,因为效率太低，它要下载一个babel.min.js，它还要在浏览器把JSX翻译成JS

方法二: webpack+babel-loader

方法三： 使用create-react-app

  • 跟@vue/cli用法类似
  • 全局安装yarn global add create-react-app
  • 初始化create-react-app react-demo-1
  • 进入目录cd react-demo-1
  • 开始开发 yarn start

使用JSX的注意事项

  • 注意className
  • <div className="red">转译为React.createElement('div',{className:'red'},'n')

插入变量

  • 标签里面的所有js代码要用{}包起来
  • 如果你需要变量n,那么就用{}把n包起来
  • 如果你需要对象,那么就要用{}把对象包起来，如{{name:mamami}}

习惯return后面加()

条件判断

在vue 中

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

JSX的条件判断

  • 在react里
const Component = () => {
return n%2===0 ? <div>n是偶数</div> : <span>n是奇数</span>
}
// div const Component = () => {//如果需要外面的div，可以写成
  return (
    <div>
{ n%2===0 ? <div>n是偶数   </div> : <span>n是奇数 </span> }
</div> )
}

还可以写成这样

const Component = () => {
  const content = (
<div>
{ n%2===0 ? <div>n是偶数   </div> : <span>n是奇数
     </span> }
    </div>
)
return content


const Component = () => { 
let inner
if (n%2===0) {
inner = <div>n是偶数   </div> } else {
inner = <span>n是奇数   </span> }
const content = ( <div>
      { inner }
    </div>
)
  return content
}

在react中写法有很多种

循环语句

  • 在vue里可以遍历数组和对象
<template>
<div>
<div v-for="(n,index) in numbers" :key="index">下标{{index}},值为{{n}}
</div>
</div>
</template>
  • 在react里
const Component =(props)=>{
return props.numbers.map((n,index)=>{
return <div>下标{index}值为{n}</div>
})
}

//如果需要外面的div，可以写成
const Component =(props)=>{
return(<div>
props.numbers.map((n,index)=>{
return <div>下标{index}值为{n}</div>
})
</div>) 
}
avatar
文章
阅读
粉丝