Блог

Я пытаюсь понять процесс повторного рендеринга react. В настоящее время я использую пакет npm whyDidYouRender вместе с довольно простым приложением для увеличения / уменьшения счетчика.

Приложение отлично работает в следующих условиях без сбоев.

1. При использовании без включения пакета npm whyDidYouRender.
2. Когда whyDidYouRender включен в родительском компоненте, соответствующая консоль.на консоли отображаются сообщения журнала.

Когда whyDidYouRender включен в компоненте changeCount {дочерние элементы}, приложение завершает работу во время увеличения / уменьшения счетчика.

Я буду признателен, если кто-нибудь сможет указать мне правильное направление, чтобы решить проблему.

Ссылка на пакет NPM whyDidYouRender:-https://github.com/welldone-software/why-did-you-render#readme

wdyr.js

 import React from "react";
const whyDidYouRender = require("@welldone-software/why-did-you-render");
whyDidYouRender(React, {
      onlyLogs: true,
      titleColor: "green",
      diffNameColor: "aqua",
});
  

index.js

 import "./wdyr";
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import ErrorBoundary from "./components/hooksTesting/ErrorBoundary";

const DisplayTitle = () => {
  console.count(`render DisplayTitle`);
  return (
    <div style={styles.mainWrapper3}>
      <h1 style={styles.display3}>HOOKS TESTING APP</h1>
    </div>
  );
};

const DisplayCount = ({ count }) => {
  console.count(`render DisplayCount`);
  return (
    <div style={styles.mainWrapper2}>
      <h1 style={styles.display2}>THE CURRENT VALUE IS {count}</h1>
    </div>
  );
};

const ChangeCount = ({ showCurrentValue }) => {
  console.count(`render ChangeCount`);
  const [value, setValue] = useState(0);
  const incr = () => setValue(value   1);
  const decr = () => value > 0 amp;amp; setValue(value - 1);

  useEffect(() => {
    const myfunc = () => {
      value >= 0 amp;amp; showCurrentValue(value);
    };
    myfunc();
  }, [value, showCurrentValue]);
  return (
    <div style={styles.buttonCompWrapper}>
      <button style={styles.mybtn} onClick={incr}>
         1
      </button>
      <button style={styles.mybtn} onClick={decr}>
        -1
      </button>
    </div>
  );
};

const Parent = () => {
  console.count(`render Parent`);
  const [count, setCount] = useState(0);

  const showCurrentValue = (value) => setCount(value);
  return (
    <div style={styles.mainWrapper1}>
      <ErrorBoundary>
        <DisplayTitle />
        <DisplayCount count={count}></DisplayCount>
        <ChangeCount showCurrentValue={showCurrentValue}></ChangeCount>
      </ErrorBoundary>
    </div>
  );
};

const styles = {
  buttonCompWrapper: {
    width: "50vw",
    height: "20vh",
    background: "grey",
  },
  mybtn: {
    margin: "1vh 2vw",
    padding: "1vh 1vw",
    background: "pink",
  },
  mainWrapper1: {
    width: "90vw",
    height: "90vh",
    background: "black",
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    aliginItems: "center",
  },

  display1: {
    color: "white",
    fontSize: "2vw",
  },
  mainWrapper2: {
    width: "50vw",
    height: "20vh",
    background: "pink",
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    aliginItems: "center",
  },

  display2: {
    color: "white",
    fontSize: "2vw",
  },
  mainWrapper3: {
    width: "50vw",
    height: "20vh",
    background: "blue",
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    aliginItems: "center",
  },

  display3: {
    color: "white",
    fontSize: "2vw",
  },
};

ChangeCount.whyDidYouRender=true;



ReactDOM.render(
  <React.StrictMode>
    <Parent />
  </React.StrictMode>,
  document.getElementById("root")
);
  

Сообщение об ошибке:-

Вы используете нестабильную версию пакета ( 5.0.0-alpha.2 ), понизив ее до стабильной версии, ошибки нет.

Вы должны решить эту проблему в Github пакета, поскольку он предварительно выпущен.

Рабочий пример:https://codesandbox.io/s/react-template-forked-o8r55?file=/index.js