解决React中的re-render问题

npm i ykj-cli -g 
ykj init App
cd ./app
yarn 
yarn dev

import Myy from './myy.jpg';

function App() {
    console.log('render')
    return (
        <div className="app">
            <h1>欢迎使用明源云 - 云空间前端通用脚手架</h1>
            <img src={Myy} alt="" style={{ width: 500, height: 500 }} />
            <h4>
                加入我们：<a>453089136@qq.com</a>
            </h4>
            <h4>微前端,WEBpack5,typescript,React,vite应有尽有</h4>
        </div>
    );
}

export default App;

import { useState } from 'react';
import Myy from './myy.jpg';
import SubApp from './SubApp'
function App() {
    const [state, setState] = useState("Peter");
    return (
        <div className="app">
            <h1>欢迎使用明源云 - 云空间前端通用脚手架</h1>
            <img src={Myy} alt="" style={{ width: 500, height: 500 }} />
            <h4>
                加入我们：<a>453089136@qq.com</a>
            </h4>
            <SubApp state={state} />
            <h4>微前端,webpack5,TypeScript,React,vite应有尽有</h4>
            <button onClick={() => {
                setState('关注公众号：前端巅峰')
            }}>测试按钮</button>
        </div>
    );
}

export default App;


//SubApp组件
function SubApp({ state }) {
    console.log('render')
    return <h1>{state}</h1>
}

export default SubApp

const [state, setState] = useState({ des: "Peter" });
  <button onClick={() => {
                setState({ des: '关注公众号：前端巅峰' })
            }}>测试按钮</button>

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

function SubApp({ state }) {
    const [data, setData] = useState({})
    useEffect(() => {
        console.log('render')
        setData(state)
    }, [state])
    console.log('render')
    return <h1>{data.des}</h1>
}

export default SubApp

  const obj1 = {
            name: "peter"
        }
        const obj2 = {
            name: "peter"
        }

        console.log(Object.is(obj1, obj2, 'xx'))

Object.is(obj1.name, obj2.name )

    useEffect(() => {
        setData(state)
        console.log('render')
    }, [state.des])

let _deps;
function useEffect(callback, dependencies) {
  const hasChanged = _deps
    && !dependencies.every((el, i) =>Object.is( el ,_deps[i]))
    || true;
  // 如果 dependencies 不存在，或者 dependencies 有变化，就执行 callback
  if (!dependencies || hasChanged) {
    callback();
    _deps = dependencies;
  }
}