相关疑难解决方法(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;

我是 reactJS 的新手，正在编写代码，以便在从 DB 加载数据之前，它会显示加载消息，然后在加载后，使用加载的数据渲染组件。为此，我同时使用了 useState 钩子和 useEffect 钩子。这是代码：

问题是，当我检查 console.log 时，useEffect 被触发了两次。因此，代码两次查询相同的数据，这是应该避免的。

下面是我写的代码：

import React from 'react';
import './App.css';
import {useState,useEffect} from 'react';
import Postspreview from '../components/Postspreview'

const indexarray=[]; //The array to which the fetched data will be pushed

function Home() {
   const [isLoading,setLoad]=useState(true);
   useEffect(()=>{
      /*
      Query logic to query from DB and push to indexarray
      */
          setLoad(false);  // To indicate that the loading is complete
    })
   },[]);
   if (isLoading===true){
       console.log("Loading");
       return <div>This is loading...</div>
   }
   else {
       console.log("Loaded!"); …

我定义了一个场景：我们有一个使用父级道具和自身状态的组件。

有两个组件 DC 和 JOKER 以及我在下面的步骤：

1. 单击 DC 的按钮
2. DC 设置计数
3. JOKER 将使用旧状态进行渲染
4. 运行 useEffect 和 setCount
5. JOKER 再次渲染

我想问一下为什么 JOKER 渲染两次（第 3 步和第 5 步），而第一个渲染浪费了性能。我只是不想要第 3 步。如果在类组件中，我可以使用 componentShouldUpdate 来避免它。但是 Hooks 有同样的东西吗？

我的代码在下面，或者打开这个网站https://jsfiddle.net/stephenkingsley/sw5qnjg7/

import React, { PureComponent, useState, useEffect, } from 'react';

function JOKER(props) {
  const [count, setCount] = useState(props.count);
  useEffect(() => {
    console.log('I am JOKER\'s useEffect--->', props.count);
    setCount(props.count);
  }, [props.count]);

  console.log('I am JOKER\'s  render-->', count);
  return (
    <div>
      <p style={{ color: 'red' }}>JOKER: You clicked …