当前位置：首页 > article >正文

学习react小记

article 2024/9/29 20:47:13

系列文章目录

前言

一、关于Hook

1、useEffect

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

1.1.1 没有依赖项数组

1.1.2 性能影响

1.1.3 使用空数组

1.1.4 包含依赖项

总结

前言

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

一、关于Hook

1、useEffect

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

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

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

 useEffect(() => {
    const isReady = defaultConfig && Object.keys(defaultConfig).length > 0
    if (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]);