为什么组件在 Click 和 state 上会重新渲染？

Question

Why does a whole component in react re-render when you change state in a onClick?

exmaple:https://codesandbox.io/s/vibrant-firefly-sgk5g?file=/src/App.js

When you click on the numbers the whole components re-renders, and if you remove the setCount from the on click function it works just fine

The idea behind the component is to add a "Active" class to the number that you have clicked, and it updated a random counter, that counter prevents the addition the "active" class, since it re-renders the whole component

EDIT: code here aswell

import React, { useState } from "react";

const Hours = () => {
  const days = [1, 2, 3, 4, 5, 6];
  const [count, setCount] = useState(1);

  const TestClick = (e, item) => {
    setCount(count + 1);
    e.currentTarget.className = "active";
  };

  const HandleHours = () => {
    let block = <span />;
    if (days) {
      block = days.map((hour, index) => {
        return (
          <span
            style={{ display: "block" }}
            onClick={e => {
              TestClick(e, hour);
            }}
            className={`col-md-4`} key={index}>
            {hour}
          </span>
        );
      });
    }
    return block;
  };

  return (
    <div>
      <HandleHours />
    </div>
  );
};

export default Hours;

Answer 1

It's the way react rerenders when a component state changes. The state hook rerenders the whole component that it's in when the setState function is called which is the second element in the array that useState returns.

If you want to change the class of an element on click, you need to store it as a state. In your code, the class of clicked span is updated on click, but right after that the component is rerendered and set to what the HandleHours returns.

I would probalby have a state that keeps track which day is clicked and render that accordingly (not sure why you need the count, but I left it there):

import React, { useState } from "react";
const Hours = () => {
  const days = [1, 2, 3, 4, 5, 6];
  const [count, setCount] = useState(1);
  const [clickedDays, setClickedDays] = useState([]); // Added clickedDays state

  const TestClick = (e, item, isDayClicked) => {
    setCount(count + 1);
    if (!isDayClicked) { // Setting clicked days if they are not in the array yet
      setClickedDays([...clickedDays, item])
    }
  };

  const HandleHours = () => {
    let block = <span />;
    if (days) {
      block = days.map((hour, index) => {
        const isDayClicked = clickedDays.includes(hour);
        return (
          <span
            style={{ display: "block" }}
            onClick={e => {
              TestClick(e, hour, isDayClicked);
            }}
            className={isDayClicked ? 'active' : 'col-md-4'} // Setting different class depending on state
            key={index}
          >
            {hour}
          </span>
        );
      });
    }
    return block;
  };

  return (
    <div>
      <HandleHours />
    </div>
  );
};

export default Hours;

Answer 2

The issue here isn't coming from the fact that the HandleHours components render but because it gets remounted everytime you change the state in the Hours component.

This happens because HandleHours is defined as a component within Hours component and everytime Hours re-renders a new reference to HandleHours is created which fools react into thinking that the component detached from DOM and a new component replaces it, since it essentialy works on reference.

Now when you render HandleHours like

<div>
  { HandleHours () }
</div>

Suddenly HandleHours turns from being a component to a function which returns JSX so this time when the Hours component re-renders, even though the function reference to HandleHours has changed. It returns the JSX with a key prop on it, which remains the same and hence React treats it as a re-render and hour changes to DOM elements aren't lost

---

Now there is a solution to the first approach too

All you need to do is to create a component HandleHours outside of your Hours component and render it by passing the required props like

import React, { useState } from "react";
import "./styles.css";

const HandleHours = ({ days, TestClick }) => {
  let block = <span />;
  if (days) {
    block = days.map((hour, index) => {
      return (
        <span
          style={{ display: "block" }}
          onClick={e => {
            TestClick(e, hour);
          }}
          className={`col-md-4`}
          key={index}
        >
          {hour}
        </span>
      );
    });
  }
  return block;
};

const days = [1, 2, 3, 4, 5, 6];
const Hours = () => {
  const [count, setCount] = useState(1);

  const TestClick = (e, item) => {
    setCount(count + 1);
    console.log("TestClick");
    e.currentTarget.className = "active";
  };

  return (
    <div>
      <HandleHours days={days} TestClick={TestClick} />
    </div>
  );
};

export default Hours;

When you do that the HandleHours component isn't re-mounted on each rerender of Hours component and it maintains the DOM elements correctly.

Here is a working demo for the second approach