React笔记一

哲学王
89 阅读3分钟

如何引入React

从CDN引入React

需要引入React与React.DOM两个JS文件

cjs和umd的区别

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

通过webpack引入React

yarn add react react-dom
import React from 'react'
import ReactDOM from 'react-dom'
注意大小写，尽量保持一直

除webpack外，rollup、parcel也支持上面写法。

使用create-react-app引入

用React实现+1

React +1button (forked) - CodeSandbox

6个6

let i;
for (i = 0; i < 6; i++) {
  setTimeout(() => {
    console.log(i);        //在1s钟之后尽快执行console.log，如果有其他fn未执行完，
  }, 1000);          //则先执行完fn再执行console.log
}                     
//一秒钟后打印6个6，因为函数执行时遇到外部变量会去读取其最新值

以上代码运行之后打印出6个6，如果需要打印出0-5的话，可以创建一个j，如下

let i;
for (i = 0; i < 6; i++) {
  let j = i;                //这里因为j的作用域在{}内，当循环下一次执行时
  setTimeout(() => {          // 虽然对象名称都是j，但是存储的地址发生了改变，所以并不是一个j
    console.log(j);
  }, 1000);
}

在for循环内使用let

for (let i = 0; i < 6; i++) {
  setTimeout(() => {
    console.log(i);        //在1s钟之后尽快执行console.log，如果有其他fn未执行完，
  }, 1000);          //则先执行完fn再执行console.log
}

或者立即执行函数

for (var i = 0; i < 6; i++) {
  !(function (j) {         //加!防止报错
    setTimeout(() => {
      console.log(j);
    }, 1000);
  })(i);  //这里的实参i将会传给形参j
}

React元素

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

()=>React元素

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

JSX

使用JSX

方法一：使用CDN

  • 引入babel.min.js
  • 把<script>改成<script type="text/babel">
  • babel会自动进行转译

缺点：

  • 不要在生产环境使用方法一，因为效率太低
  • 需要下载一个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">n</div>
被转译成
React.creatElement('div',{className:"red"},n)

插入变量
标签里面的所有JS代码都要用{}包起来
如果你需要变量n，那么就用{}把n包起来
如果你需要对象，那么就要用{}把对象包起来，如{{name:'Zhoujia22'}}

习惯return后面加()

条件控制语句 if...else...

在Vue里

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

在React里

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;
};

或

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

循环语句

在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) => {
  let array = [];
  for (let i = 0; i < props.numbers.length; i++) {
    array.push(
      <div>
        下标{i}值为{props.numbers[i]}
      </div>
    );
  }
  return <div>{array}</div>;
};
avatar
文章
阅读
粉丝