React 初体验

长昼煦汐
548 阅读6分钟

引入React(3种方法)

1' CDN引入(不推荐)

需要引入2个库：先引react 后引react-dom,注意顺序

<body>
  <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> //引入之后就可以使用你自己的js了
</body>

测试是否引用成功

本地运行parcel src/index.html

⚠️注意:CDN引入的都会变成全局变量window

console.log(window.React); //打印出一个对象
console.log(window.React.createElement); //打印出一个函数
console.log(window.ReactDOM); //对象
console.log(window.ReactDOM.render); //函数

这种方法没人用，如果想升级就需要重新复制版本号，麻烦。

其它

1.cjs和umd的区别？(优先用umd) cjs全称CommonJS,是Node.js支持的模块规范。

模块规范指"如何声明一个模块",平时我们是const x = {...}然后导出export default x就声明一个可以被别人导入的模块。Node.js有自己的模块定义方法，这个方法就叫cjs。

umd是统一模块定义，兼容各种模块规范(含浏览器) 理论上优先使用umd,同时兼容Node.js上的模块和浏览器模块。 最新的模块规范是使用import和export关键字。

2' 通过webpack引入React(不推荐)

这种方法需要配置webpack，也麻烦，不用。

除webpack外，rollup、parcel也支持上面写法。这2个工具都支持，把浏览器不支持的JS变成浏览器支持的JS。

3' 用命令行create-react-app  (推荐)

安装 yarn global add create-react-app
创建 create-react-app react-demo-1

  • React元素

    createElement的返回值element可以代表一个div

    但element并不是真正的div（DOM）对象

    所以我们一般称element为虚拟DOM对象

  • () => React元素

    返回element的函数，也可以代表一个div

    这个函数可以多次执行，每次得到最新的虚拟div

    React会对比两个虚拟div，找出不同，局部更新视图

    找不同的算法叫做DOM Diff算法

例子:用React实现+1

1.用React创建div

const App = React.createElement("div", {className:'red'},n}

意思是创建:
<div class='red'> n </div>

JS里设置className就是在设置class，class是关键字在以前不能用，现在能用了，但是延续了这个习惯。

2.CDN引入的都会变成全局变量window，测试是否引用成功 console.log(window.React)

3.实现+1功能

React不会监听自动刷新页面，只能自己去刷新:

方法:需要刷新页面时再次执行renderReactDOM.render(App, document.querySelector("#app"))

还是不能实现+1，失败是因为App=React.createElement(...)只执行了一次。

如何让它重新执行，以获取n的最新值？

方法:通过把App变成函数解决。记不记得6个6，函数可以获取最新值。

App = React.createElement(...)
改为App = ()=> React.createElement(...)
//App等于一个函数，这个函数执行之后才会返回这个对象。
//App必须执行了才会去取n的值。

所以第1次render时要render返回的这个div,ReactDOM.render(App(),root),第2次也要App()。函数运行时会重新读n的值，因此会得到最新的n。

对比普通代码与函数区别

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

这是函数(不讨论参数)

let f = () => 1+a

let b = f()

普通代码立即求值，读取a的当前值

函数会等调用时再求值，即延迟求值。且求值时才会读取a的最新值

函数的特点：函数是延迟执行的代码

对比React元素和函数组件

App1 = React.createElement("div", null, n)

App1是一个React元素

App2 = () => React.createElement("div", null, n)

App2是一个React函数组件

启示

函数App2是延迟执行的代码,会在被调用的时候执行

注意我说的是代码执行的时机，没有在说同步和异步

同步和异步关注的是得到结果的时机

React元素

React.createElement("div", null, n)用来创建一个元素，createElement的返回值element可以代表一个div, 但本身不是一个div对象，也就是说你不能把这个对象直接插到页面里。 element并不是真正的div(DOM对象)。所以我们一般称element为虚拟DOM对象。

() => React元素

1.返回element的函数，也可以代表一个div

2.这个函数可以多次执行，每次得到最新的虚拟div

3.React会对比两个虚拟div,找出不同，局部更新视图

4.找不同的算法叫做DOM Diff算法

那么找出2个虚拟DOM虚拟div 不同的地方，然后得到一个最小化的结果局部更新视图，这个找不同的过程就叫做DOM Diff算法。

JSX

使用JSX(3种方法)

1' 用CDN(不要用)

语法:所有的标签用标签形式写，如果需要插入JS变量或者JS函数，就把那个东西用{}包起来。

也不需要在函数后面加()了，因为App是一个函数组件，组件就直接当标签用就可以了，它会自动去调用你的App这个函数的。<App />

html
</body>
  <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="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
  <script type="text/babel">
      let n = 0;
      const App = () => (
        <div> //创建div
          {n} //插入变量
          <button onClick={() => { //插入函数
              n += 1;
              render();
            }}
            >
            +1
          </button>
        </div>
      );
      const render = () =>
        ReactDOM.render(<App />, document.querySelector("#app"));
      render();
  </script>
</body>

用CDN bable.js的原理是，bable.js会把页面上浏览器不认识的bable代码翻译成浏览器认识的JS代码，然后把JS代码放到页面里，去替换之前浏览器不认识的。

2' webpack + babel-loader

新手跳过，配置太麻烦。

3' 使用create-react-app(推荐)

跟@vue/cli用法类似

- yarn global add create-react-app //全局安装
- create-react-app react-demo //初始化目录
- cd react-demo
- yarn start //开发

示例

inde.jtml
<div id="root"></div>
  
App.js
import React from "react"

const App = () => {
    return ( //这里默认使用了jsx语法
        <div>App组件</div> //相当于React.createElement()
    )
}
export default App

index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js'
//console.log(React);
ReactDOM.render(<App />, document.getElementById('root'))

image.png

现在Vue和React打平了，都可以写HTML:

Vue写在.vue文件的<template>里

React把HTML混在JS/JSX文件里

条件判断 与 循环控制

一.条件判断

在JSX里如何使用条件判断if...else...？

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

JSX的条件判断

//在React里
//第1种
const Component = () => {
  return n%2 === 0 ? <div> n是偶数 </div> : <span> n是奇数 </span>
}
//如果需要外面的div，可以写成
const Component = () => {
    return (
        <div>
         //⚠️别忘了用{ }包起来，只要是js东西就必须用{ }包起来！
            {n % 2 === 0 ? <div> n是偶数 </div> : <span> n是奇数 </span>}
        </div>
    )
}

//第2种
cconst Component = () => {
    const content = (
        <div>
            {n % 2 === 0 ? <div>n是偶数</div> : <span>n是奇数</span>}//别忘了用{ }包起来
        </div>
    )
    return content
}

//第3种
const Component = () => {
    const inner = n % 2 === 0 ? <div>n是偶数</div> : <span>n是奇数</span>
    const content = (
        <div>
            {inner} //别忘了{ }将inner包起来
        </div>
    )
    return content
}
//第4种
const Component = () => {
    let inner
    if (n % 2 === 0) {
        inner = <div>n是偶数</div>
    } else {
        inner = <span>n是奇数</span>
    }
    const content = (
        <div> {inner} </div>
    )
    return content
}

结论:在Vue里只能用Vue提供的语法写条件判断，在React里你想怎么写就怎么写，你就是在写JS而已。这就是Vue与React最明显的区别。

二.循环语句loop

在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>)
}

//还可以这样写(麻烦不推荐)
const Component = (props) => {
  const array = []
  for(let i=0;i<props.numbers.length;i++){
    array.push(<div>下标为{i}值为
      { props.numbers[i]} </div>)
   }
   return <div>{ array }</div>
}
avatar
文章
阅读
粉丝