React 阻止组件在单击事件时重新渲染

Question

我花了很多时间试图弄清楚如何阻止我的组件this.createColorBlocks()在render()方法中重新渲染。我读过关于纯组件和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}        />      );    });  };

Answer 1

react 中的每个状态更新都会导致重新渲染，并且当您onClick切换editable标志时，组件将在每次单击按钮时重新渲染。如果您不想每次都重新生成颜色，则需要将该函数移出render()（例如，移至componentDidMount()，正如 John Ruddell建议的那样）。