symbol
Symbol是JavaScript中的一种原始数据类型（Primitive data type），引入于ES6标准。Symbol表示一个独一无二的标识符（identifier），用于对象属性的命名或其他用途。
下面是Symbol的一些特点和用法：
- 独一无二性：每个通过Symbol函数创建的Symbol值都是唯一的，不会重复。即使创建时传入相同的参数，得到的Symbol值也是不同的。
- 不可变性：Symbol值是不可变的，无法修改。这意味着它们是作为对象属性的标识符时，可以确保属性名的唯一性。
- 作为属性名：Symbol可以用作对象的属性名，通过Symbol作为键，创建的属性不会出现命名冲突的问题。
const mySymbol = Symbol(); const obj = { [mySymbol]: 'Hello Symbol!' }; console.log(obj[mySymbol]); // Hello Symbol!
- 隐藏属性：由于Symbol值的唯一性和不可变性，可以将某些属性设置为使用Symbol作为键，使其不容易被意外修改或访问。这在定义一些特殊用途的内部属性时很有用。
- 预定义Symbol：JavaScript语言内部已经定义了一些预定义的Symbol，如
Symbol.iterator、Symbol.toStringTag等，它们具有特定的含义和用途。
Symbol是一种非常有用的特性，它增加了更多的语言表达能力和灵活性，特别在避免属性名冲突和定义隐藏属性时非常有用。但由于其独特的特性，使用Symbol也需要谨慎，确保正确理解其用途和行为。
useRef / ref / forwardsRef 的区别是什么?
在React中，useRef、ref和forwardRef是用于处理引用（ref）的三个相关概念和技术。
useRef:useRef是React提供的一个钩子函数，用于在函数组件中创建可变的引用。useRef返回一个可变的ref对象，该对象的current属性可以持有并跟踪一个值，在组件重新渲染时保持不变。useRef通常用于保存和访问组件中的DOM节点、持久化数据或其他可变值。ref:ref是React提供的一个属性，用于在类组件中创建引用。通过在一个组件上添加ref属性并为其赋值，可以创建对组件实例或DOM节点的引用。通过ref.current可以访问引用的值。ref通常用于访问组件的实例、控制焦点、触发DOM操作等。forwardRef:forwardRef是React提供的API之一，用于在组件之间转发引用。它允许一个组件向其子组件传递引用，以便子组件可以操作父组件或其他组件的DOM节点。forwardRef函数接受一个组件，并返回一个新的组件，该新组件可以接收ref属性。使用forwardRef可以将ref通过组件树层级进行传递。
区别总结如下：
useRef是一个钩子函数，在函数组件中用于创建可变引用。ref是一个属性，在类组件中用于创建引用。useRef和ref的本质都是为了创建和访问引用值，但用法和语法不同。forwardRef是一个API，用于在组件之间转发引用，特别是在使用函数组件时。forwardRef结合ref一起使用，使得引用可以在组件树中向下传递。
需要注意的是，useRef和ref创建的引用在更新时不会引起组件重新渲染，但使用引用的值可能会影响组件的渲染结果。forwardRef允许引用在组件树中传递，但不会触发任何默认的引用行为。
useEffect 的第二个参数, 传空数组和传依赖数组有什么区别？
useEffect是React提供的一个钩子函数，用于处理组件副作用（side effects），比如数据获取、订阅更新、DOM操作等。useEffect接受两个参数：一个effect函数和一个依赖数组。
- 传空数组：如果将空数组作为
useEffect的第二个参数，即useEffect(effect, [])，则表明该effect不依赖于任何props或state。这意味着该effect仅在组件挂载时（初始化）运行一次，并在组件卸载时清除。它不会再在组件的重新渲染时被调用。
useEffect(() => { // 这个effect只在组件挂载时运行一次 // 在组件卸载时清除effect // 不依赖任何props或state // 在后续重新渲染时不会再被调用 // ... }, []);
- 使用空数组作为依赖数组的
useEffect常用于只需要在组件挂载和卸载时进行一次性操作的场景，例如订阅和取消订阅事件、初始化一些数据等。 - 传依赖数组：如果在
useEffect的第二个参数中传递一个包含依赖项的数组，即useEffect(effect, [dependency1, dependency2])，则表明该effect的执行依赖于指定的变量。只有当依赖项发生变化时，该effect才会被调用。
useEffect(() => { // 这个effect在组件挂载时运行，以及依赖项发生变化时重新运行 // 在组件卸载时清除effect // 依赖dependency1和dependency2 // ... }, [dependency1, dependency2]);
- 传递依赖项的数组告诉React只有当这些依赖项之一发生变化时，才重新运行effect。这允许effect对特定状态或props的更改做出反应，并在需要时进行相应的操作。
总结区别如下：
- 传空数组作为依赖数组：effect仅在组件挂载时运行一次，并在组件卸载时清除。不依赖props或state，不重新运行。
- 传递依赖项的数组：effect在组件挂载时运行一次，并在依赖项发生变化时重新运行。在组件卸载时清除effect。
如果 return 了一个函数, 传空数组的话是在什么时候执行? 传依赖数组的时候是在什么时候执行?
当在useEffect中返回一个函数时，该函数被称为“清除函数”（cleanup function）。清除函数的执行时机与传递的依赖数组有关。
- 传空数组：如果将空数组作为依赖数组，即
useEffect(effect, [])，则清除函数只会在组件卸载时执行。
useEffect(() => { // effect的逻辑... return () => { // 清除函数，只在组件卸载时执行 // ... }; }, []);
- 当传递空数组时，effect函数只在组件挂载时调用一次，并在组件卸载时执行清除函数。这种情况下，清除函数仅被用来取消订阅、清理计时器、释放资源等在组件卸载时需要进行的操作。
- 传递依赖项的数组：如果传递一个包含依赖项的数组，即
useEffect(effect, [dependency1, dependency2])，则清除函数会在下一次effect运行之前执行，当依赖项发生变化时重新运行effect，或在组件卸载时执行。
useEffect(() => { // effect的逻辑... return () => { // 清除函数，在下一次effect执行之前执行 // 或在组件卸载时执行 // ... }; }, [dependency1, dependency2]);
- 当依赖项发生变化时，React会在再次运行effect之前执行清除函数。这使得我们可以在effect执行之前清理和准备一些内容，以确保我们得到最新的状态。当组件卸载时，清除函数同样会被执行。
总结执行时机如下：
- 传空数组：清除函数只在组件卸载时执行。
- 传递依赖项的数组：清除函数在下一次effect执行之前执行（当依赖项发生变化时），或在组件卸载时执行。
