Javascript 如果数据不会更改，在React组件中使用状态是否是一种不好的做法？我应该在类上使用属性吗？

假设我有一个呈现一组按钮的React组件，我将按钮的信息存储在一个对象中，并带有一个标签和一个方法，当按钮被附加时运行

这些按钮不需要对任何更改做出反应，而且它们自己也永远不会更改

将这些按钮的信息存储在状态中是一种不好的做法吗？这些是我目前提出的解决方案

1。在状态下存储按钮

class Header extends Component {
  constructor() {
    super();
    this.state = {
      buttons: [
        {
          label: 'Save',
          method: this.save
        },
        {
          label: 'Edit',
          method: this.edit
        }
      ]
    }
  }

  // Class Methods
  // ...
  // End of Class Methods

  render() {
    <ButtonGroup buttons={this.state.buttons} />
  }
}

class Header extends Component {
  constructor() {
    super();
    this.buttons = [
      {
        label: 'Save',
        method: this.save
      },
      {
        label: 'Edit',
        method: this.edit
      }
    ];
  }

  // Class Methods
  // ...
  // End of Class Methods

  render() {
    <ButtonGroup buttons={this.buttons} />
  }
}

类头扩展组件{
构造函数（）{
超级（）；
此.state={
按钮：[
{
标签：“保存”，
方法：this.save
},
{
标签：“编辑”，
方法：this.edit
}
]
}
}
//类方法
// ...
//类结束方法
render（）{
}
}

2。在React的状态之外存储按钮

class Header extends Component {
  constructor() {
    super();
    this.state = {
      buttons: [
        {
          label: 'Save',
          method: this.save
        },
        {
          label: 'Edit',
          method: this.edit
        }
      ]
    }
  }

  // Class Methods
  // ...
  // End of Class Methods

  render() {
    <ButtonGroup buttons={this.state.buttons} />
  }
}

class Header extends Component {
  constructor() {
    super();
    this.buttons = [
      {
        label: 'Save',
        method: this.save
      },
      {
        label: 'Edit',
        method: this.edit
      }
    ];
  }

  // Class Methods
  // ...
  // End of Class Methods

  render() {
    <ButtonGroup buttons={this.buttons} />
  }
}

类头扩展组件{
构造函数（）{
超级（）；
此按钮=[
{
标签：“保存”，
方法：this.save
},
{
标签：“编辑”，
方法：this.edit
}
];
}
//类方法
// ...
//类结束方法
render（）{
}
}

3。使用无状态功能组件（仅当不需要类方法且不使用其他状态时适用）

函数保存（）{
...
}
函数编辑（）{
...
}
常量按钮=[
{
标签：“保存”，
方法：保存
},
{
标签：“编辑”，
方法：编辑
}
];
常量头=（）=>（）；

问题归根结底是：

• 将数据存储在不会更改且保持不变的状态是一种不好的做法吗
• 对常数使用状态会影响性能吗
• 是否有理由存储不会在状态中更改的数据，如果我在其他地方有状态，是否更容易将状态用于所有内容

---

快速回答您的问题：

将数据存储在不会更改且保持不变的状态是一种不好的做法吗

有点，是的。状态用于存储用户界面的当前“状态”。如果某个特定的UI组件从未更改，那么谈论“状态”就没有意义，因为只有一个状态

对常数使用状态会影响性能吗

没有

如果有理由存储不会在状态中更改的数据，如果我在其他地方有状态，那么只对所有内容使用状态是否更容易

实际上并没有，但即使它被认为是一种有效的实践，我也会认为您牺牲了代码的可读性和结构，因为您不会区分UI中的静态和动态内容

---

---

根据提供的代码片段，我强烈建议您选择

（2）

或

（3）

。我将考虑这两个好的实践，取决于您想在哪里存储数据（在组件内或之外），以及灵活性是否重要。当您不需要道具来初始化组件时，不需要显式定义构造函数1和2看起来与meProps完全相同，这通常是一种更简单的方法，以防您以后要重用组件。如果您总是呈现相同的“硬编码”按钮，那么为什么不干脆将它们保留在呈现方法中？@stack26我的印象是，如果不转换类属性，不定义构造函数而明确地设置状态，则只能在最新的Chrome中工作。@Chris Apologies，格式化时会出错，现在就把它换了。把按钮作为子项的一部分，而不是按钮组，怎么样component@Icepickle当然可以，但我不知道这将如何回答OP的问题。这将是一个如何促进OP可重用性的选项，他以前可能没有考虑过？