react基础

在开发环境下，useEffect 第二个参数设置为空数组时，组件渲染时会执行两次？

在开发环境下，useEffect 第二个参数设置为空数组时，组件渲染时会执行两次。这是因为 React 在开发模式下会执行额外的检查，以检测 Trumpkin 警告并给出更好的错误信息。当你指定 [] 作为 deps 时，这意味着 effect 没有任何依赖项，所以它应该只在组件挂载时执行一次。但是，在第一次渲染时，React 无法确定 deps 是否会在将来的渲染中发生变化。所以它会在初始渲染时执行一次 effect，然后在 “调用阶段” 再执行一次，以确保如果 deps 发生变化，effect 也会再次执行。如果在 “调用阶段” 重新渲染时 deps 仍然为 []，那么 React 会更新内部状态，记录该 effect 确实没有依赖项，并在将来的渲染中跳过 “调用阶段” 重新执行的步骤。

这就是在开发环境下 effect 会执行两次的原因。这种行为只在开发模式下发生，在生产模式下 effect 只会执行一次。目的是为了提高开发体验，给出更清晰的错误提示。如果 effect 的 deps 发生变化但没有再次执行，React 可以明确地给出警告。而在生产模式下，这样的检查是不必要的，所以 effect 只会执行一次以减少性能开销。

总结一下：当你在开发环境下使用 useEffect 并指定 [] 作为依赖项时，effect 函数会在初始渲染时执行两次。这是因为 React 会在 “调用阶段” 再次执行 effect，以检查依赖项是否发生变化，给出更清晰的警告信息。如果 deps 仍然为 []，那么 React 会更新状态并在将来跳过 “调用阶段” 的重新执行。这种行为只在开发模式下发生，生产模式下 effect 只会执行一次。

useEffect实现的原理

https://www.cnblogs.com/guangzan/p/17329688.html

function useEffect (create, deps) {
  const effect = () => {
    const newValue = create ();  // 读取最新值
    storedValue.current = newValue;  // 更新旧值
  }

  if (!deps) {
    didRender = true;  // 没有依赖项，每次渲染后运行
  }

  if (didRender) effect ();   // 运行 effect

  if (deps && depsChanged) {
    effect ();     // 如果有依赖项且变化了，运行 effect
  }
}

基础hooks：useState，useEffect，useContext。

useMemo和useCallback使用场景

react hooks组件能不能和class组件混用？

不能class组件里不能使用hooks语法

1694592478894

解决useState数据异步的问题

1. 通过useEffect监听state，把更新后的操作放到useEffect里。
2. 通过setTimeout宏任务,设置为0就行。宏任务扩展到------js的运行机制-事件循环机制------扩展到队列和栈

react队列和key

key值会告诉react每个组件对应数组的哪一项。有利于列表的增删改移动时，精准定位，从而减少dom树的操作。

<></>标签的作用

当你需要单个元素时，你可以使用 <Fragment> 将其他元素组合起来，使用 <Fragment> 组合后的元素不会对 DOM 产生影响，就像元素没有被组合一样。在大多数情况下，<Fragment></Fragment> 可以简写为空的 JSX 元素 <></>

参数

• 可选 key：列表中 <Fragment> 的可以拥有 keys。

注意事项

• 如果你要传递 key 给一个 <Fragment>，你不能使用 <>...</>，你必须从 'react' 中导入 Fragment 且表示为 <Fragment key={yourKey}>...</Fragment>。
• 当你要从 <><Child /></> 转换为 [<Child />] 或 <><Child /></> 转换为 <Child />，React 并不会重置 state。这个规则只在一层深度的情况下生效，如果从 <><><Child /></></> 转换为 <Child /> 则会重置 state。在这里查看更详细的介绍。

react源码大致分析：

https://blog.csdn.net/weixin_39622123/article/details/111173123 react的这些hooks的方法都是分发器（dispatcher）的方法。dispatcher resolveDispatcher 函数创造的。dispatcher=ReactCurrentDispatcher.current；ReactCurrentDispatcher.current是一个Dispatch类型。

这里的Dispatch仅仅是一个类型而已，我们赋值具体的值在不同的阶段是不同的：

• 在挂载阶段：HooksDispatcherOnMount
• 在更新阶段：HooksDispatcherOnUpdate