Есть ли ошибка в документации React о том, как думать в React? - PullRequest
Новая
       21

Есть ли ошибка в документации React о том, как думать в React?

0 голосов
/ 24 января 2020

Я изучаю React, поэтому я предпочел начать с документации. В последней главе о «Мышление в действии» (https://reactjs.org/docs/thinking-in-react.html) они рекомендуют задать несколько вопросов, чтобы определить, является ли часть данных частью состояния:

Давайте go через каждого и выясним, какой из них является состоянием. Задайте три вопроса о каждом фрагменте данных:

Передается ли он от родителей через реквизит? Если это так, то, вероятно, это не состояние.

, а затем:

Кажется, что текст поиска и флажок находятся в состоянии, поскольку они изменяются со временем и не могут быть вычисленным из чего угодно.

Я согласен с этим, но в то же время оба элемента передаются как реквизиты компоненту SearchBar. Так что здесь они не будут выполнять этот вопрос.

1 Ответ

0 голосов
/ 24 января 2020

TLDR; Это не ошибка в документации.

Для дальнейшего объяснения, скажем, у нас есть два компонента Parent и Child.

Это было бы неправильным использованием состояния в Child component: 

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 unncessesary, we've just duplicated props
    }
  }

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

Исходя из представленных вопросов, нам не нужно foo в состоянии Child. Вместо этого мы должны ссылаться на него через props: 

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

Но это не значит, что foo не может находиться в состоянии Parent (до тех пор, пока он удовлетворяет вопросы в своем собственном контекст). Поскольку в настоящее время это не так, скажем, Parent изменения foo при нажатии кнопки: 

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, поскольку Child не изменяет значение, оно просто отображает его.

Не всегда все так просто. Вот почему вопросы такие, какие они есть. Там не написано "Никогда не создавай государство на основе реквизита". Иногда это именно то, что вы хотите сделать.

Давайте рассмотрим пример: скажем, Child имеет текстовый ввод, и мы хотим, чтобы Parent сказал ему, каким должен быть текст по умолчанию. 

class Parent extends Component {
  render() {
    return <Child default_text="This is what you wanted to type right?" />
  }
}

class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
       text: props.default_text // Now it serves a purpose!
    }
  }

  render() {
    return (
      <input 
        value={this.state.text} 
        onChange={(e) => this.setState({ text: e.target.value })} 
      />
    )
  }
}

Теперь мы имеем переломил ситуацию. props используется для инициализации state в Child, но на этот раз имеет смысл, потому что значение будет меняться со временем. Принимая во внимание, что больше не имеет смысла иметь state в Parent, потому что это просто значение по умолчанию и оно не изменится.

Надеюсь, это немного больше смысла.

...