React 或 CRA 是否优化静态语句？如何防止静态语句得到优化？

Question

让我们考虑下面的代码 sn-p，它是从React tutorial demo calculator 修改而来的。分别在赋值语句之前放置了两个日志记录调用。

export default class Button extends React.Component {
  // <= The newly added content
  static propTypes = (console.log("static statement executed"), {. 
    name: PropTypes.string,
    orange: PropTypes.bool,
    wide: PropTypes.bool,
    clickHandler: PropTypes.func,
  });
  // <= The newly added content
  member = (console.log("normal statement executed"), 1);  

  handleClick = () => {
    this.props.clickHandler(this.props.name);
  };

  render() {
    const className = [
      "component-button",
      this.props.orange ? "orange" : "",
      this.props.wide ? "wide" : "",
    ];

    return (
      <div className={className.join(" ").trim()}>
        <button onClick={this.handleClick}>{this.props.name}</button>
      </div>
    );
  }
}

在执行npm run build 并检查build/static/ 下的工件后，我发现与静态分配关联的第一个日志记录语句消失了，而第二个记录语句保留了下来。此外，查看页面的浏览器控制台确实记录了第二条消息，但没有记录第一条消息。

所以我想知道 React 或 CRA 是否优化了任何静态语句？如果是这样，如何防止这样的语句得到优化？

Answer 1

如果您正在创建生产版本，我相信 propTypes 已被剥离。 here你可以看到CRA的变化。使用的插件是babel-plugin-transform-react-remove-prop-types。因此，为什么您的第二个语句正在评估，而不是 propTypes 下的那个。