React文档中有关于如何在React中思考的错误？

Question

我正在学习React，所以我更喜欢从文档开始。在关于“ React中的思考”（https://reactjs.org/docs/thinking-in-react.html）的上一章中，他们建议提出一些问题，以识别何时一条数据不属于状态的一部分：

让我们仔细检查每个状态，找出哪个状态。问三有关每条数据的问题：

它是通过道具从父母那里传入的吗？如果是这样，那可能不是状态。

然后：

搜索文本和复选框似乎处于状态，因为它们已更改随着时间的流逝，无法用任何东西来计算。

我同意这一点，但同时两个元素都作为道具传递给SearchBar组件。因此，在这里他们将无法解决这个问题。

Answer 1

为了进一步说明，可以说我们有两个成分Parent和Child。

[[0]组件中状态的使用不当：

Child

基于提出的问题，我们不需要处于

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

  render() {
    return <Child foo={this.state.foo} />
  }
}

class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
       foo: props.foo // this is pointless
    }
  }

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

状态的foo。相反，我们应该通过Child引用它：

props

但是这并不意味着

  render() {
    return <div>{this.props.foo}</div>
  }

不能处于foo的状态。可能单击Parent即可更改其值：

Parent

现在

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

  render() {
    return 
      <div>
         <Child foo={this.state.foo} />
         <button onClick={() => this.setState({ foo: 'You clicked me!' })}>Click Me</button>
      </div>
  }
}

中的foo确实满足列出的条件，因为该状态会随着时间而变化，因此属于状态。但是，在Parent的上下文中，它不符合状态的要求，因为Child不会更改值，而只是显示它。