Question

我有一个反应组件接收一些道具。这些道具需要映射到不同的结构才能使用（对于select，它需要与我们的商店不同的结构）。我想知道在生命周期的哪个阶段我应该这样做。

我已阅读文档：https://facebook.github.io/react/docs/component-specs.html，并建议保持渲染功能纯净：

render（）函数应该是纯的，这意味着它不会修改组件状态，每次调用时返回相同的结果，它不会读取或写入DOM或以其他方式进行交互使用浏览器

现在我假设它仍然可以映射props，因为它不是state而且我没有更改它们<\ n> / p>

import React from 'react';

export default class IndicatorSelect extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const options = this.props.store.items.map(item => ({ value: item.id, label: item.name }));

    return (
      <div>Display the data in some way here: {options.value} {options.label}</div>
    );
  }
}

ThisComponent.propTypes = {
  store: React.PropTypes.object.isRequired,
};

这是推荐的方式，还是父组件负责格式化传递给此组件的道具？或者我应该以生命周期方法或完全不同的方式执行此操作？

Answer 1

是的，@ mervagsz评论是正确的 - props内render正常化并不是那么糟糕，除非你做得很多。如果它“太多”，我会创建一个容器组件来规范化props并将它们传递给只用于渲染的表示。

回答这个问题并不容易，但我遵循的经验法则是：

演示组件应尽可能以最方便/标准化的方式接收其道具，以便仅处理渲染。

但是，对于规范化，如在您的示例中，创建其他容器组件没有意义 - 此时的开销太大。 当您开始感受转换道具的痛苦时，创建一个容器组件并让它为您转换，或者如果它已经是容器，则在父级中执行。

在生命周期的哪个阶段我应该修改我的道具？

1 个答案: