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