相关疑难解决方法(0)

我有一个计数器和一个console.log()来useEffect记录我状态中的每个变化，但是useEffect在挂载时被调用两次。我正在使用 React 18。这是我项目的CodeSandbox和以下代码：

import  { useState, useEffect } from "react";

const Counter = () => {
  const [count, setCount] = useState(5);

  useEffect(() => {
    console.log("rendered", count);
  }, [count]);

  return (
    <div>
      <h1> Counter </h1>
      <div> {count} </div>
      <button onClick={() => setCount(count + 1)}> click to increase </button>
    </div>
  );
};

export default Counter;

import { useContext, useEffect, useState } from 'react';

const Log =  ()  =>  {
    useEffect(()  => {
        console.log('Running ...')
    },[])

    return(<p>here</p>)

}

export default Log;

每当此代码运行时，我都会 在浏览器控制台中收到两次正在运行...消息。

我认为它应该运行一次，因为我在 useEffect 中有一个空的第二个参数。

谁能解释一下为什么它运行两次？

我正在使用 React Context API，发现提供程序在每次值更改时都会渲染两次。

这是我所做的。

1. 创建了一个上下文，然后创建了一个呈现其提供者的组件。
2. 提供者提供状态值及其设置器。
3. 创建了一个直接渲染其子级的直接子级。
4. 创建了一个读取上下文值并添加一个按钮来更改它的消费者。
5. 每个组件在渲染时都会执行 console.log。
6. 向提供程序添加了效果，无需每次渲染时都进行记录。
7. 在提供程序中添加了一个引用，该引用在每次渲染时都会递增，并且会记录在渲染和效果中。

问题 ？

每次我点击按钮更改上下文值时，提供程序都会渲染两次，但效果仅执行一次。

因此 ref 总是递增两次，但效果每次只获取最后一个值（它会跳过一个值！）。

另外，在提供程序的第一次渲染时，它会记录两次相同的引用值，这对我来说非常奇怪。

谁能告诉我为什么我会出现这种行为？

这是代码：

提供者：

const MyContext = React.createContext(0);

function Provider({ children }) {
  const state = React.useState("Yes");
  const ref = React.useRef(0);
  ref.current += 1;
  console.log("Context provider ", ref.current);
  React.useEffect(() => {
    console.log("effect on provider, ref value = ", ref.current);
  });

  return <MyContext.Provider value={state}>{children}</MyContext.Provider>;
}

两个孩子

function DirectChild({ children }) {
  console.log("provider direct child");
  return children;
}

function Consumer() {
  console.log("consumer");
  const …