不用管函数组件执行了几次

import React, { useEffect, useState } from "react";



function BlogView({id}) {
  // 打开页面，执行两次
  // blogContent 为 null 执行一次，请求有内容执行一次
  // 其实不用管执行了几次，函数组件，state 和 props 相同，那么组件输出相同。也就是函数式，不管执行几次，输入相同，输出相同
  // 注意入参和函数内的自变量就可以了
    console.log(11);
    const [blogContent, setBlogContent] = useState(null)
    useEffect(() => {
        const doAsync = async () => {
            setBlogContent(null)
            // Simulating a fetch with fake data
            const fakeFetch = (id) => {
                return new Promise((resolve) => {
                    setTimeout(() => {
                        resolve({
                            text: () => Promise.resolve(`This is the content for ${id}`)
                        });
                    }, 1000); // Simulating network delay
                });
            };
            const res = await fakeFetch(id);
            setBlogContent(await res.text())
        }
        doAsync(id)
    }, [id])
    const isLoading = !blogContent
    return <div>{isLoading ? 'loading...' : blogContent}</div>
}

function Sample() {
  // 父组件重新渲染，子组件都会执行
  console.log(2222);
  const todos = [{text: 'haha'}]
  // 执行一次，因为依赖的是空数组
  // useEffect(()=> {
  //   console.log(11111);
  // }, [])

  // 每次父组件重新渲染，都会打印
  // 每次 Sample 函数重新执行，todos 的值都是新的（虽然内容相同，引用不同），所以会执行
  // 依赖的比较是浅比较
  useEffect(() => {
    console.log(11111);
  }, [todos])
}


function Blog() {
    const idList = ['blog1', 'blog2', 'blog3']
    const [activeId, setActiveId] = useState(idList[0])

    return (
        <div>
            <ul>
                {
                    idList.map(id => {
                        return <li key={id} onClick={() => setActiveId(id)}>{id}</li>
                    })
                }
            </ul>
            <BlogView id={activeId}></BlogView>
      <Sample></Sample>
        </div>

    )
}

export default Blog