一、React 中怎么让组件多次挂载？
import { useState, useEffect } from "react";
//Com组件
function Com(props) {
const { val } = props;
useEffect(() => {
console.log("执行mounted");
}, []);
console.log("render", val);
return <div>{val}</div>;
}
// Com组件的父组件
function App() {
const [val, setVal] = useState(1);
return (
<>
<button onClick={() => setVal(val + 1)}>change</button>
<Com val={val} key={val} />
</>
);
}
// 问题 怎么让 Com 组件 多次 挂载(mounted)?
export default App;解决方法：
- 在 Com 组件上添加 key 值 (推荐使用)
【key 的作用】
react 中的 key 属性，它是一个特殊的属性。
react 利用 key 来识别组件，它是一种身份标识。每个 key 对应一个组件，相同的 key ，react 认为是同一个组件，这样后续相同 key 对应的组件都不会被创建，而是会被传入新的数据，更新组件。
有了 key 属性后，就可以与组件建立了一种对应关系，react 根据 key 来决定是销毁重新创建组件还是更新组件。- 通过给
Com组件传递一个唯一的标识
【优点】
- 组件不需要多次`mounted`
【缺点】
- 增加了代码耦合性
- 引入了额外的复杂度二、你不知道的 js 知识
变量提升
var 关键字声明的变量，无论实际声明的位置在何处，都会被视为声明在函数的顶部（如果声明不在任意函数内，则视为在全局作用域的顶部）
Js 引擎的工作方式是，先预解析代码， 获取所有被声明的变量和函数声明，然后再一行一行地运行，这就使所有变量声明的语句，都会被提升到代码的头部，这就是变量提升
var res = (function (x, f = () => x) {
var x;
console.log(x); // 1
var y;
y = x;
x = 2;
return [x, y, f()];
})(1);
console.log(res); // [2, 1, 1]var x = 1;
function f(
x,
y = function () {
x = 3;
console.log("y", x); // y 3
}
) {
var x;
console.log(x); // undefined
x = 2;
y();
console.log(x); // 2
}
f();
console.log(x); // 1箭头函数没有自己的 this，取决于外层函数，call 对它来说没有任何作用。
var res1 = function () {
console.log(this.x); //outer
return [(() => this.x).call({ x: "inner" }), (() => this.x)()]; // ['outer', 'outer']
}.call({ x: "outer" });
console.log(res1);字符串的迭代
var res2 = [..."..."];
// ''.split('')
console.log(res2); //es6 迭代 ['.', '.', '.']隐式转换
var a = { x: 1 };
var b = { x: 2 };
var obj = {};
// 对象变为 key 值会默认调用 toStirng()，变成[Object Object]
console.log(a.toString()); // [object Object]
obj[a] = 100;
obj[b] = 200;
console.log(obj[a]); // 200
console.log(obj[b]); // 200// 1 + {} 与 {} + 1的输出结果分别是什么？
console.log(1 + {}); // 1[object Object]
console.log({} + 1); // [object Object]1
// 新版 node 会全部解析成表达式
console.log(eval("1 + {}")); // 1[object Object]
console.log(eval("{} + 1")); // 1
// 旧的 eval 会根据代码顺序，做不同的解析，第二个 eval 中的`{}`被解析成了代码块