React 最佳实践：在组件中拥有除 `state` 之外的属性

Question

I'm reviewing a React Component and it contains a state property as well as an allData property.

To follow best practice, shouldn't allData be a part of state ?

constructor(props) {
    super(props);

    this.allData = [];
    this.state = {
      allDisplayedData: [],
      allRowsCount: -1,
      favData: [],
      favRowsCount: -1,
    };

    this.searchAll = this.searchAll.bind(this);
    this.handleCellClick = this.handleCellClick.bind(this);
  }

Answer 1

If you want to make the array part of state, then yes, if no, then no.

Answer 2

If you want the component to re-render on changing it, then it needs to be in state, otherwise put it wherever. Any instance variables other than this.state aren't part of React's control, so they don't have the same ability to set using setState. This means that they don't re-render the component like the state does.

Essentially, it depends on what you do with it and how you want to work with it.

I tend to use this pattern for things like cancelTokens and intervalIds and other data I might need later, but don't need as part of the state because it's only needed in unmount or update but not in the render itself.

If it's needed in the render, you should have it in state or be prepared to deal with the component not rendering when it's updated.

Answer 3

Other than the two previous detailed answers, I found the following statement at https://reactjs.org/docs/state-and-lifecycle.html

While this.props is set up by React itself and this.state has a special meaning, you are free to add additional fields to the class manually if you need to store something that doesn't participate in the data flow (like a timer ID).