Как дочерний компонент получает реквизиты от родительского компонента, не слушая метод жизненного цикла? - PullRequest
Новая
       54

Как дочерний компонент получает реквизиты от родительского компонента, не слушая метод жизненного цикла?

2 голосов
/ 09 июля 2019

Для обновления объекта props в дочерних компонентах обычно используется метод жизненного цикла ComponentWillReceiveProps.Но я понял, что props для дочернего компонента можно обновить без прослушивания для ComponentWillReceiveProps.

Например, в следующем компоненте с именем App дочерний компонент Comp может получатьprops без прослушивания для метода жизненного цикла ComponentWillReceiveProps.

Основной App компонент: 

import React from 'react';
import ReactDOM from 'react-dom';
import {Comp} from "./comp";

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    }

    this.incrementCounter = this.incrementCounter.bind(this);
  }

  componentDidMount() {
    this.setState({
      counter: 100
    })
  }

  incrementCounter() {
    this.setState({
      counter: this.state.counter + 1
    })
  }

  render() {
    return (
      <div>
              <button onClick={this.incrementCounter}>Increment</button>
              <br />
              <br />
              <Comp counter={this.state.counter}/>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

и дочерний Comp компонент: 

import React from 'react';

export class Comp extends React.Component {

  constructor(props) {
    super(props);
    this.state = {}
  }

  componentDidUpdate(prevProps, prevState) {
    console.log("prev props ", prevProps);
    console.log("prev state", prevState)
  }

  render() {
    return <span>Props received: {JSON.stringify(this.props)}</span>
  }
}

Вот также рабочая демонстрация приведенного выше кода, которую я подготовил

Edit jovial-engelbart-3dsun

Вы увидите, что дочерний компонент Comp получает свойство counter без прослушивания для любого метода жизненного цикла.

Что это значит?Я что-то упустил?

Ответы [ 2 ]

2 голосов
/ 09 июля 2019

componentWillReceiveProps() - устаревший метод жизненного цикла, который запускается, когда компонент собирается получить новые реквизиты. Однако он не контролирует, получает ли компонент эти реквизиты.

https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops

Компонент будет получать обновленные реквизиты от родителя независимо от того, componentWillReceiveProps()

import React from 'react';

export class Comp extends React.Component {

  constructor(props) {
    super(props);
    this.state = {}
  }

  render() {
    console.log(this.props.counter) //still gets printed with new props data
    return <span>Props received: {JSON.stringify(this.props)}</span>
  }
}

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

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

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

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

0 голосов
/ 09 июля 2019

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

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

В случае, если вы не хотите, чтобы ваш дочерний компонентдля повторного рендеринга при некоторых условиях вы можете использовать жизненный цикл shouldComponentUpdate.Этот жизненный цикл является просто оптимизацией производительности. Прочитайте о shouldcomponentupdate

Также рассмотрите возможность использования PureComponent вместо компонента.Он выполняет поверхностное сравнение реквизита и состояния и снижает вероятность того, что вы пропустите необходимое обновление. Читать о PureComponent

...