javascript - React 防止组件在点击事件上重新渲染

Question

我花了很多时间试图找出如何阻止我的组件在 render() 方法中重新渲染 this.createColorBlocks() 。我读过有关纯组件和 shouldComponentUpdate 方法的帖子，但我还无法找出一种方法，允许我将生成的数组添加到状态，然后映射一次它已更新。

我走在正确的道路上吗？在渲染方法内触发 createColorMethod 方法是否会导致整个组件重新渲染？我怎样才能避免这种情况？

import React, { Component } from "react";
import ColorScheme from "color-scheme";
import uuidv1 from "uuid/v1";
import ColorBar from "../ColorBar/ColorBar";
import "./PalettePicker.css";

export default class PalettePicker extends Component {
  state = {
    hue: null,
    colorScheme: null,
    variation: "pastel",
    colors: [],
    editable: false
  };

  // shouldComponentUpdate(nextProps) {
  //   return this.props.color !== nextProps.color;
  // }

  toggleEditable = () => {
    const toggle = this.state.editable;
    this.setState({ editable: !toggle });
  };

  generateRandomHue = () => {
    return Math.floor(Math.random() * (360 + 1));
  };

  generateColors = () => {
    // The possible values are 'mono', 'contrast', 'triade', 'tetrade', and 'analogic'
    const { hue, colorScheme, variation } = this.state;
    const { pColorScheme = "mono" } = this.props;
    const scheme = new ColorScheme();
    scheme
      .from_hue(hue || this.generateRandomHue())
      .scheme(colorScheme || pColorScheme)
      .variation(variation);
    // return scheme.colors();
    const colors = scheme.colors().map(color => {
      return "#" + color;
    });
    return colors;
  };

  createColorBlocks = () => {
    const generatedColors = this.generateColors();
    const colors = generatedColors.splice(0, this.props.totalColors);
    console.log(colors);
    return colors.map((color, i) => {
      const uuid = uuidv1();
      return (
        <ColorBar
          color={color}
          vRotate={this.props.vRotate}
          number={i}
          key={uuid}
        />
      );
    });
  };

  render() {
    const editBlockStyles = {
      transform: "translateY(-15px)"
    };
    const colors = this.createColorBlocks();
    return (
      <section className="PalettePicker">
        <div className="colors-section">{colors}</div>
        <div className="button-bar">
// I believe this onClick event is causing the rerender.
          <button className="primary-btn" onClick={this.toggleEditable}>
            Edit Colors
          </button>
          <button className="primary-btn">Save</button>
        </div>
      </section>
    );
  }
}

Answer 1

React 中的每个状态更新都会导致重新渲染，并且当您的 onClick 切换 editable 标志时，组件将在每次单击按钮时重新渲染。如果您不希望每次都重新生成颜色，则需要将该函数移出 render()(例如，移至 componentDidMount())，如下所示约翰·拉德尔 suggested )。