反應備忘錄沒有得到道具

Question

React memo 沒有捕獲 props， prevProps和nextProps和組件都渲染得很好。 反應文檔說

• 如果您的 function 組件在給定相同道具的情況下呈現相同的結果，則可以將其包裝在對 React.memo 的調用中以提高性能。

我的問題是使用反應備忘錄停止兩次渲染，但備忘錄似乎不起作用，並且組件使用相同的道具渲染兩次。

在/events上單擊Create New Event時呈現組件

這是現場沙盒。

• 位於/components/Event/CreateEvent/CreateEvent.js的子組件

• 父組件位於/Pages/Event/Event.js行號999 ' 從那里觸發子組件

這是代碼：

import React from "react";
import AuthContext from "../../context/global-context";
import CreateEvent from "../../components/Event/CreateEvent/CreateEvent";

function Events({ location }) {

  // Sate Managing
  const [allEvents, setAllEvents] = React.useState([]);
  const [creating, setCreating] = React.useState(false);

  // Context As State
  const { token, email } = React.useContext(AuthContext);

  // Creating Event Showing
  const modelBoxHandler = () => {
    // works on when the ViewEvent is open
    if (eventSelected) {
      setEventSelected(null);
      return;
    }

    setCreating(!creating);
  };

  return (
    <div className="events">

      {/* New Event Creating */}
      {creating && (
        <CreateEvent onHidder={modelBoxHandler} allEvents={allEvents} />
      )}

      {console.log("Event Rendered.js =>")}

    </div>
  );
}

export default React.memo(Events, () => true);

矩形備忘錄沒有道具的子組件：

import React from "react";
import AuthContext from "../../../context/global-context";

function CreateEvent({ onHidder, allEvents }) {
  // Context
  const { token } = React.useContext(AuthContext);

  console.log("CreatedEvent.js REnder");
  return (
       ... Some code here
  );
}

export default React.memo(CreateEvent, (prevProps, nextProps) => {
  console.log("Hello", prevProps, nextProps);
});

提前感謝您的寶貴答案和時間！

Answer 1

在您的示例中，您沒有額外的渲染讓React.memo工作。

根據您的渲染邏輯，沒有任何nextProps ，您使用條件渲染（ creating ）卸載組件。

// You toggle with `creating` value, there is only single render each time
creating && <CreateEvent onHidder={modelBoxHandler} allEvents={allEvents}/>

// Works, because there will be multiple renders (nextProps)
true && <CreateEvent onHidder={modelBoxHandler} allEvents={allEvents} />

在這種情況下，您可能不需要React.memo 。

Answer 2

問題是，在creating變量的基礎上，您實際上是在重新安裝而不是渲染CreateEvent 組件。 這意味着如果創建變量更改，則在創建為真時卸載並重新安裝組件，因此它不是重新渲染

您還必須注意， modelBoxHandler function 參考也會在每次重新渲染時發生變化，因此即使您的 CreateEvent 組件在渲染 state 並且父級由於某種原因重新渲染，CreateEvent 組件也將重新渲染

您需要進行 2 項更改才能使其更好地工作

• 使用 useCallback 鈎子定義 modelBoxHandler
• 基於create prop在createEvent中進行條件渲染

 // Creating Event Showing
  const modelBoxHandler = useCallback(() => {
    // works on when the ViewEvent is open
    if (eventSelected) {
      setEventSelected(null);
      return;
    }

    setCreating(prevCreating => !prevCreating);
  }, [eventSelected]);
   ...
    return (
        <div className="events">

          {/* New Event Creating */}
          <CreateEvent creating={creating} onHidder={modelBoxHandler} allEvents={allEvents} />

          {console.log("Event Rendered.js =>")}

        </div>
    );

並在 createEvent

function CreateEvent({ onHidder, allEvents, creating }) {
  // Context
  const { token } = React.useContext(AuthContext);

  console.log("CreatedEvent.js REnder");
  if(!creating) {
     return null;
  }
  return (
       ... Some code here
  );
}

export default React.memo(CreateEvent);