Question

在关于数据和React的几乎所有对话中，Props和State是两个最常见的概念。但是，我已经注意到，从技术上讲，在React组件中存在第三种设置数据的方法。更具体地说，您可以通过将值设置为this来设置值。

例如，下面的代码设置了三个值。 State的一个值，默认Props的一个值，this的另一个值。我可以打印所有三个。

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      stateSecret: "foo"
    };
    this.otherSecret = "bar";
  }

  render() {
    return (
      <div className="App">
        {this.state.stateSecret}
        <br />
        {this.otherSecret}
        <br />
        {this.props.propsSecret}
      </div>
    );
  }
}

App.defaultProps = {
  propsSecret: "baz"
};

export default App;

通常，我想通过将值设置为this来确定是否要执行反模式。这是我应该避免的事情吗？

Answer 1

不，这不是反模式，通常还可以。

如果它是一个常量，您甚至可以在外部（第4种方式：D）进行定义，例如：

const otherSecret = "bar";
class App extends Component {

}

一般来说：

将其定义为状态，如果它会因组件中定义的某些逻辑而改变
在父级中定义它，如果它会被父级中定义的逻辑更改，则作为prop传递

还要考虑的另一件事是，当prop或状态的值更改时，该组件会触发更改并再次运行render（），因此，如果要反映更改，则应在状态或状态下声明它作为父组件的道具。

在React组件中设置state和props之外的值是否是反模式？

1 个答案: