vlambda博客
学习文章列表

React全解之00React起手式

一. 如何引入 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