React:将静态变量存储在状态与呈现变量中

Question

我在这里发现了与我的问题类似的讨论，但我想深入了解。

我还没有找到任何React文档来讨论静态变量(不变但需要用于React视图(是否应该作为状态变量存储，或者在每次重新绘制组件时重新构建。

假设我有一个React组件，它接收一个道具，这是一个列表，我想将这个列表映射到某个输出。在我的用例中，我将列表转换为组件的选择选择器将使用的选项的格式。一旦制定了此列表，就不需要更改。在组件的其余使用过程中，所有选项都将保持不变。

把它放入状态感觉很奇怪，尽管它看起来更有效率。让我们看两种方法。

方法#1：以组件状态存储选项列表。

class Component extends React.Component {
constructor(props) {
this.state = {
options: props.list.map(some => computation)
}
}
render() {
return ( <SelectPicker options={this.state.options} /> )
}
}

方法#2：在每次重新提交时重新创建变量。

class Component extends React.Component {
constructor(props) {
...
}
render() {
const options = this.props.list.map(some => computation)
return ( <SelectPicker options={options} /> )
}
}

后者似乎更正确，因为选项数组永远不会更改，它只需要初始化一次，并且在它上面放置一个观察程序作为state的一部分是没有意义的。前者似乎更有效，因为我们只计算一次这个值，而不是每次重新绘制组件时都重新计算它。是的，React会比较转发器之间的状态，但它不会比较options列表引用吗？而后一个例子将完全重建一个新列表？Tbh，这两者似乎都不像"；"干净"；方法。

Answer 1

两者都不是更好的选择。在构造函数中，将this.options设置为映射的数组，然后在渲染方法中使用this.options访问它。

class Component extends React.Component {
constructor(props) {
this.options = props.list.map(some => computation);
}
render() {
return ( <SelectPicker options={this.options} /> )
}
}

这样可以避免重复创建相同的数组。直接在this.上设置值是完全可以的，状态点是，如果状态变量发生变化，则会再次调用render方法。