Javascript React：防止useContext重新渲染整个应用程序或在组件之间共享数据而不重新渲染所有组件

每当IntersectionObserver检测到交集时，它就会在App和App中设置状态，并重新渲染它的所有子对象:

function App() {
  // re-renders App and all children
  const [homePart, setHomePart] = useState<string>("");
  console.log("App is rendered");

  return (
    <>
      <homeLinks.Provider value={{ homePart, setHomePart }}>
        <Header /> {/* Outside router, meant to be shared with other pages  */}
        <Home /> {/* Will be in react router */}
      </homeLinks.Provider>
    </>
  );
}

相反，上下文应该是注册到交集事件的漏斗，而不是保持它自己的状态.如果组件需要设置状态(并触发重新呈现)，它应该侦听事件，并设置自己的状态.

Sandbox个

The homeLink context

该上下文导出两个挂钩:

1. useRegisterListener-接受注册为监听程序的函数.
2. useObserve-返回可用作函数引用以观察DOM元素的observe函数.

该上下文还输出HomeLinksProvider启动器IntersectionObserver和listeners集合.它为上下文使用者提供了添加/删除侦听器和观察DOM元素的所有相关函数.提供程序在卸载时处理所有清理.

它还会等待观察者准备好，然后再渲染包裹的子对象.

import React from "react";
import {
  createContext,
  useContext,
  useState,
  useRef,
  useEffect,
  useMemo,
} from "react";

export type Listener = (id: string) => void;

const HomeLinks = createContext({
  observe: (instance: HTMLElement | null) => {},
  addListener: (listener: Listener) => {},
  removeListener: (listener: Listener) => {},
});

// register listeners to intersection events
export const useRegisterListener = (listener: Listener) => {
  const { addListener, removeListener } = useContext(HomeLinks);

  useEffect(() => {
    addListener(listener);

    return () => {
      removeListener(listener);
    };
  }, [addListener, removeListener, listener]);
};

// returns a ref function to observe DOM elements
export const useObserve = () => {
  const { observe } = useContext(HomeLinks);

  return observe;
};

// The provider initiates the IntersectionObserver,
// and calls listeners when elements are visible.
// It also disconnects the observer and clears the listeners Set.
export const HomeLinksProvider = ({ children }) => {
  // delay rendering children until context is ready
  const [ready, setReady] = useState(false);
  const menuObserver = useRef<IntersectionObserver>();
  const listners = useRef<Set<Listener>>();

  useEffect(() => {
    listners.current = new Set(); // initiate the listeners Set
    // create a new observer
    menuObserver.current = new IntersectionObserver(
      (entries) => {
        const entry = entries[0];
        const id = entry.target.getAttribute("id") ?? "ntn here";

        if (entry.isIntersecting)
          listners.current?.forEach((listener) => listener(id));
      },
      { rootMargin: "-40% 0px -50% 0px" },
    );

    setReady(true); // allow rendering children when context is ready

    return () => {
      // cleannup
      menuObserver.current?.disconnect();
      listners.current?.clear();
    };
  }, []);

  const contextValue = useMemo(
    () => ({
      // obsere DOM elements
      observe: (instance: HTMLElement | null) => {
        if (instance) menuObserver.current?.observe(instance);
      },
      // register listeners to Listeners Set
      addListener: (listener: Listener) => {
        listners.current?.add(listener);
      },
      // remove listeners from Listeners Set
      removeListener: (listener: Listener) => {
        listners.current?.delete(listener);
      },
    }),
    [],
  );

  // render children when context is ready
  return (
    <HomeLinks.Provider value={contextValue}>
      {ready ? children : null}
    </HomeLinks.Provider>
  );
};

用途:

应用程序:

function App() {
  console.log("App is rendered");

  return (
    <>
      <HomeLinksProvider>
        <Header /> {/* Outside router, meant to be shared with other pages  */}
        <Home /> {/* Will be in react router */}
      </HomeLinksProvider>
    </>
  );
}

家:你在做什么？

export const Home = () => {
  const observe = useObserve();

  console.log("Home is rendered");

  return (
    <>
      <div
        className="hero"
        id="home"
        ref={observe}
      >
        <section style={{ height: "100vh", backgroundColor: "palevioletred" }}>
          <div className="depth"></div>
          <div className="heroContent">
            <main>
              <h1>This is Home</h1>
            </main>
          </div>
        </section>
      </div>
      <div
        id="projects"
        style={{ height: "100vh", backgroundColor: "gray" }}
        ref={observe}
      >
        This is Projects
      </div>

      <div
        id="contact"
        style={{ height: "100vh", backgroundColor: "cadetblue" }}
        ref={observe}
      >
        This is contact
      </div>
    </>
  );
};

标题:

const homeLinks = [
  { href: "home", title: "Home" },
  { href: "projects", title: "Projects" },
  { href: "contact", title: "Contact" },
];

function Header() {
  const [homePart, setHomePart] = useState('home');

  useRegisterListener(setHomePart);

  return (
    <header>
      <div>
        <a href="/">Menu</a>
      </div>
      <nav>
        <ul>
          {homeLinks.map((homeLink) => (
            <li key={homeLink.href}>
              <a
                href={"/#" + homeLink.href}
                className={homePart == homeLink.href ? "active" : ""}
              >
                {homeLink.title}
              </a>
            </li>
          ))}
        </ul>
      </nav>
    </header>
  );
}