如何防止在 React 中重新渲染随机颜色答案

【问题标题】：How to prevent re-rendering of random colours in React如何防止在 React 中重新渲染随机颜色
【发布时间】：2020-01-05 17:03:41
【问题描述】：

我在渲染时为三个图像图标分配了一种随机颜色。但是，当我单击按钮以呈现对话框弹出窗口时，图标的颜色会再次重新呈现。如何防止这种情况发生？

const colours = [blue[800], green[800], lime[500], brown[500], 
grey[500], yellow[800], blueGrey[500],
orange[800], purple[800], red[800], pink[800], indigo[800], cyan[500], teal[500],];
const colour = () =>  colours[Math.floor(Math.random() * colours.length)];

handleClick= () => {
    this.setState({
        openDialog: true
    }); 
}

render() {
    return (
    <div>
        <Button onClick={() => this.handleClick()}  variant="contained" >
        Post
        </Button> 

        <Avatar  style={{backgroundColor: colour()}}>S</Avatar>
        <Avatar  style={{backgroundColor: colour()}}>S</Avatar>
        <Avatar  style={{backgroundColor: colour()}}>S</Avatar>

        <Dialog
        keepMounted
        fullWidth = "true"
        onClose={this.handleClose}
        aria-labelledby="customized-dialog-title"
        open={this.state.openDialog}
        >
        </Dialog>
    </div>
    );
}

代码沙盒链接：https://codesandbox.io/s/quirky-bouman-8p2zb

【问题讨论】：

您可以使用 PureComponent 来防止重新渲染组件。此外，您可以将 react 钩子与单独的 UseState 用于颜色和 openDialog 状态。

标签： javascript css reactjs colors

【解决方案1】：

它正在重新渲染，因为您正在使用openDialog 状态更改组件的状态。也许您也可以将计算出的颜色存储在状态中，但组件本身将再次重新渲染。最后它应该显示相同的已计算颜色。

也许会在constructor 中生成颜色，然后将其存储在state 中：

constructor() {
  super();
  this.state = {
    openDialog: false,
    colors: [
      colour(),
      colour(),
      colour()
    ]
  };
}

然后以某种方式使用：

<Avatar  style={{backgroundColor: this.state.colors[0]}}>S</Avatar>
<Avatar  style={{backgroundColor: this.state.colors[1]}}>S</Avatar>
<Avatar  style={{backgroundColor: this.state.colors[2]}}>S</Avatar>

此外，您还需要更改handleClick：

handleOpenDialog = () => {
  this.setState(prevState => ({
    ...prevState,
    openDialog: true
  }));
};

希望对你有帮助！

【讨论】：

【解决方案2】：

如果您不想在每次重新渲染时更新这些颜色，只需将 color() 函数移出渲染函数即可。

您可以在构造函数中将颜色声明为state，并将其用作按钮背景颜色的值。

并在你想要的情况下更新状态。

演示： https://codesandbox.io/s/quizzical-margulis-uc610?fontsize=14&hidenavigation=1&theme=dark

【讨论】：