Question

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

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

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

如果需要使用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 }

除了较少线条的明显好处之外，我想知道这种语法的优点/缺点是什么。

*示例不包括类方法的绑定，因为我知道在使用胖箭头语法声明这些方法时可以进行绑定。

Answer 1

优点：

更少的代码，更隐含

缺点：

您无法像使用构造函数

e.g

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,
  }
}

React类属性初始值设定项的优缺点

1 个答案: