React初体验

如何使用引入React？

方法一：CDN引入

该方法需要注意顺序

引入React:https://.../react.x.min.js
引入ReactDOM:https://.../react-dom.x.min.js

必须同时引入这两个CDN，且顺序不能变。

注意：cjs和umd的区别。

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

方法二：webpack引入React

需要安装 react-dom 。

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

注意：需要大小写，尽量保持一致。

方法三：推荐使用这个

新手选择 create-react-app ，老手选择 webpack/rollup

yarn global add create-react-app    //全局安装
create-react-app 项目名    //初始化目录
yarn start //开发使用

等待下载即可。

概念

App1 = React.createElement('div',null,n)    //App1是一个React元素
App2 = () => React.createElement('div',null,n)    //App2是一个React函数组件

最大的作用是：

• React元素会立马执行函数，当到这行代码时，就会执行。
• React函数组件会被延迟执行代码，只在被调用的时机才会执行。

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-loader可以在 <template><script><style> 写代码，通过vue-loader变成一个构造选项。
• JSX可以把 <button onClick="add">+1</button> 变成 React.createElement('button', {onClick:...}', '+1') ，这是用babel-loader就可以做到（还有个jsx-loader，但被代替了），babel-loader还被webpack内置了！

如何引用JSX？

方法一：CDN

引用babel.min.js，把 <script> 改成 <script type="text/babel"> ！
缺点效率低，不推荐使用。

方法二：webpack + babel-loader

新人直接使用方法三。

方法三：使用create-react-app

和@vue/cli类似

yarn global add create-react-app    //全局安装
create-react-app 项目名    //初始化目录
yarn serve //开发使用

JSX语法

JSX插入变量：

• 标签里的所有JS代码都要用 {} 包含起来。
• 需要变量n，也需要用 {} 把n包含起来。如 {n}
• 需要对象，需要用 {} 包含起来。如 {{name:'frank'}}

return 后面需要加 ()

条件判断

在Vue里可以使用 v-if 和 v-else ，如：

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

在React里，可以用 {} 括起JS语法：

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

如果需要外面的div，可以写成

const Component = () => {
    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 = () => {
    const inner = n%2 === 0 ? <div>n是偶数</div> : <span>n是奇数</span>
  const content = (
      <div>
      {inner}
    </div>
  )
  return content
}

循环

同样的，在Vue里：

<template>
    <div>
    <div v-for="(n, index) in numbers" :key="index">下标为{{index}}，值为{{n}}</div>
    <span v-else>n是奇数</span>
  </div>
</template>

在React里：

const Component = (props) => {
    return (
      <div>
      {
          props.numbers.map(n,index) => {
            return <div>下标{index}值为{n}</div>
        }
      }
    </div>
  )
}

还有：

const Component = (props) => {
    const array = []
  for(let i = 0; i < props.numbers.length; i++){
      array.push(<div>下标{i}值为{props.numbers[i]}</div>)
  }
  reutrn (<div>{array}</div>)
}