系列文章目录

---

前言

时间比较紧迫都是边看代码边学习react，顺手记录一下帮助有需要的朋友。

---

一、关于Hook

1、useEffect

useEffect 是 React 中的副作用 Hook，允许你在组件渲染后执行某些副作用操作。它接收两个参数：

• 第一个参数是一个函数，定义了当副作用触发时执行的逻辑。
• 第二个参数是数组形式。useEffect 只有在依赖项发生变化时才会重新执行。useEffect 无法接受其他类型（如对象、字符串等）作为第二个参数。
• 数组中的元素可以是任何可以追踪变化的值（如状态、props等），但它们都必须是可序列化的。如果依赖项是对象或数组，只有引用发生变化时，useEffect 才会重新执行。

譬如这里的依赖项是 defaultConfig，在这段代码中，当 defaultConfig 发生变化时，useEffect 内部的函数会被执行。这段代码的目的是确保当新的 defaultConfig 被提供时，它能够与当前的 inputs 合并，并且不会覆盖已有的输入值。这有助于在初次渲染或配置变化时，自动应用默认配置，同时保留用户已输入的内容。

 useEffect(() => {const isReady = defaultConfig && Object.keys(defaultConfig).length > 0if (isReady) {setInputs({...defaultConfig,...inputs,})}// eslint-disable-next-line react-hooks/exhaustive-deps}, [defaultConfig])

1.1 如果在 useEffect 中没有声明第二个参数（依赖项数组），则会导致 useEffect 的行为有所不同。具体来说，以下是几种可能的情况： 

1.1.1  没有依赖项数组

如果完全不传入第二个参数，useEffect 会在每次组件重新渲染时都执行。也就是说，每次组件的状态或属性变化导致组件重新渲染时，useEffect 都会被调用。这种情况下：

useEffect(() => {// 这段代码会在每次渲染时执行const isReady = defaultConfig && Object.keys(defaultConfig).length > 0;if (isReady) {setInputs({...defaultConfig,...inputs,});}
});

1.1.2  性能影响

• 频繁执行：没有依赖项数组可能会导致不必要的性能开销，特别是在渲染频率较高的情况下。每次渲染都执行副作用，可能导致多次更新状态、重新计算等操作，从而影响性能。
• 状态不一致：如果 inputs 的值也在这个 useEffect 中变化，可能会导致组件陷入无限循环，因为 setInputs 会导致组件重新渲染，从而再触发 useEffect。

1.1.3 使用空数组 

如果传入一个空数组 [] 作为第二个参数，useEffect 只会在组件首次挂载时执行一次，之后不会再执行：

useEffect(() => {// 这段代码只会在组件挂载时执行一次const isReady = defaultConfig && Object.keys(defaultConfig).length > 0;if (isReady) {setInputs({...defaultConfig,...inputs,});}
}, []);

1.1.4 包含依赖项

当你传入 defaultConfig 作为依赖项时，useEffect 只会在 defaultConfig 变化时执行，这样可以确保副作用只在相关数据变化时被触发，从而保持组件的高效和响应性。

useEffect(() => {// 这段代码只会在 defaultConfig 变化时执行const isReady = defaultConfig && Object.keys(defaultConfig).length > 0;if (isReady) {setInputs({...defaultConfig,...inputs,});}
}, [defaultConfig]);

总结

• 没有依赖项：每次渲染都会执行 useEffect，可能导致性能问题和状态不一致。
• 空数组 []：useEffect 只在组件首次挂载时执行。
• 有依赖项（如 [defaultConfig]）：useEffect 只在依赖项变化时执行，适用于需要在特定数据变化时执行副作用的情况。

---

总结

持续记录中....