javascript - React 类属性初始化器的优点/缺点

Question

使用 React，我知道您可以像这样初始化组件状态:

class Foo extends Component {
  constructor() {
    super();

    this.state = { count: 0 };
  }
}

如果 state 需要用 props 初始化:

class Foo extends Component {
    constructor(props) {
        super(props);

        this.state = { this.props.count: 0 };
    }
}

但是，使用 transform-class-properties 插件，您可以像这样初始化状态:

class Foo extends Component {
    state = { count: 0 };
}

由于this在构造时引用了类下的实例，所以初始状态仍然可以使用props:state = { this.props.count: 0 }

除了行数更少的明显好处外，我还想知道这种语法的优点/缺点。

*示例不包括类方法的绑定(bind)，因为我知道在使用粗箭头语法声明这些方法时可以完成绑定(bind)。

Answer 1

优点:

• 更少的代码，更隐式

缺点:

• 你不能像使用构造函数那样做任何一步一步的计算

例如

constructor(props){
  super(props)

  const z = props.x - props.y;
  const g = props.a + props.b;
  const total = z ** g;
  const shouldBeOpened = total > 1000;

  this.state = {
    shouldBeOpened,
    initialSomething: z > g,
  }
}