React全解之00React起手式

Posted 2021-04-25 Ories的手账本

一. 如何引入 React

• 新手用 create-react-app,和 VueCli 一个级别的东西,老手 webpack/rollup

create-react-app react-demo
// 等待好安装即可
cd react-demo
yarn start

二. 用 React 实现按钮+1,都是 JS 基础知识

import React from "react";
import ReactDOM from "react-dom";

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

ReactDOM.render(App(), document.getElementById("root"));

三. 从经典面试题打印 6 个 6 理解函数

let i;
for (i = 0; i < 6; i++) {
  setTimeout(() => {
    console.log(i), 1000;
  });
}
// 1秒后打印6个六

• 理由如下图
• 如何打印 1,2,3,4,5,6，见下图，
• for(let i)是一个语法糖，每次其实都会把值赋值给 i',打印 i'
• 还可以用立即执行函数解决

for (var i = 0; i < 6; i++) {
  !(function (j) {
    () => console.log(j), 1000;
  })(i);
}
// 如果要绕可以把j也写成i
for (var i = 0; i < 6; i++) {
  !(function (i) {
    () => console.log(i), 1000;
  })(i);
}

四. 函数与延迟执行

• 对比普通代码与函数
• 普通代码

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 元素
• createElement 的返回值 element 可以代表一个 div
• 但 element 并不是真正的 div(DOM 对象)
• 所以我们一般称之为 虚拟 DOM对象
• ()=> React 元素
• 返回 element 的函数，也可以代表一个 div
• 这个函数可以 多次执行，每次得到最新的 div
• React 会对比两个虚拟 div, 找出不同，局部更新视图
• 找不同的算法叫做 DOM Diff 算法

六. JSX

• Vue 有 vue-loader,.vue 文件通过 vue-loader 变成构造选项

• 而 React 有 jsx,但是名字并不是叫 jsx-loader,而是 babel-loader,通过 babel-loader 进行编译

• webpack 把 babel-loader 内置了

• jsx 语法总结起来就是,所有的标签用标签形式写，如果需要插入 js 变量或者函数，就把这个东西用花括号包起来

• 写 JSX 的注意事项

• 注意 className

<div className="red">n</div>

• 上述代码会被转译为

React.createElement("div", { className: "red" }, null);

• 插入变量

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

• 习惯 return 后面加()

七. 条件判断与循环控制

• 条件判断

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

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

• 还可以这样写
• 还可以这样写
• 在 React 里
• 在 Vue 里

• 循环语句

• 在 Vue 里面可以遍历数组和对象

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

• 在 React 里,也需要+key

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

• 结论
• 在 Vue 里，只能通过 Vue 提供的语法条件写判断
• 在 React 里，想怎么写就怎么写，就是在写 js