Question

我正在使用新的代码库。通常，我会在React组件中设置如下状态：

class App extends React.Component {
    constructor() {
        super();
        this.state={
            foo: 'bar'
        }
     }
    ....

在这个新的代码库中，我看到了很多：

class App extends React.Component {
    state={
        foo: 'bar'
     }
    ....

以这种方式进行操作是否有优势？他们似乎只在状态不需要更改时才这样做。我一直认为状态是React处理的东西。这可以吗？

Answer 1

两种方法的最终结果是相同的。两种方法都只是设置组件的初始state。值得注意的是class properties are a stage 3 proposal，因此所有开发环境可能无法使用它们。

如果在构造函数中没有做任何其他事情，我个人喜欢使用class字段变体，因为它编写的代码更少，并且您无需担心super的调用。

示例

class Component1 extends React.Component {
  state = { value: this.props.initialValue };

  render() {
    return <div> {this.state.value} </div>
  }
}

class Component2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: props.initialValue };
  }

  render() {
    return <div> {this.state.value} </div>
  }
}

function App() {
  return (
    <div>
      <Component1 initialValue={1} />
      <Component2 initialValue={2} />
    </div>
  );
}

Answer 2

实际上，它们两个都绑定到this指针。 this的{{1}}中产生的constructor。

您完全可以通过class来访问本地状态，但是在第一种样式中，您可以通过this.state将props传递到constructor，然后在super中使用它声明，如下所示：

state

太好了，您可以在class App extends React.Component { constructor(props) { super(props); this.state={ foo: 'bar', jaz: props.someParentState, } } ....中访问props，不是很漂亮吗？我肯定会在本地状态声明中使用这种样式。

希望这对您有所帮助。

在React中this.state与state

2 个答案: