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

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 或 state 的值发生变化时，组件会触发变化并再次运行 render()，所以如果你想反映变化，你应该在状态或作为来自父组件的道具。

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

Is setting a value outside of both state and props in a React component an anti-pattern?

reactjs

react-props