React, как это работает?

Question

[Сергей Алексеев]

Как это работает ? И почему вообще этот код работает ? Конкретно про стейт компонента.

class News extends React.Component {
    state = {
        filteredNews: this.props.data,
    }
    componentWillReceiveProps(nextProps) {
        console.log({ nextProps })
        console.log({ oldProps: this.props })
    }
    renderNews = () => {
        const { filteredNews } = this.state // используем состояние
        let newsTemplate = null
        if (filteredNews.length) { // везде data заменена на filteredNews
            newsTemplate = filteredNews.map(function(item) {
                return <Article key={item.id} data={item} />
            })
        } else {
            newsTemplate = <p>К сожалению новостей нет</p>
        }
        return newsTemplate
    }
    render() {
        const { filteredNews } = this.state // аналогично, используем состояние
        return (
            <div className="news">
               {this.renderNews()}
               {filteredNews.length ? (
                   <strong className={'news__count'}>
                       Всего новостей: {filteredNews.length}
                   </strong>
               ) : null}
           </div>
       )
    }
}

И у меня этот код не работает, взял из руководства react-course-v2

Comments

[Алексей Ярков]

А ошибку и что именно при запуске происходит нам угадать?

[Анатолий Жаров]

Объясните подробнее, что не так со стейтом? Единственная проблема которую вижу - компонент не будет реагировать на изменение data в пропсах

[Артем]

тэгай Максим )

[Максим]

Антон Спирин хороший ответ написал, что именно здесь непонятно и что не работает, Сергей Алексеев ?

Answer 1

[Антон Спирин]

Запись:

state = {
  filteredNews: this.props.data,
};

аналогична:

constructor(props) {
    super(props);
    this.state =  {
      filteredNews: this.props.data,
    };
  }

this.props.data записывается в state единожды в конструкторе. В последствии, при получении нового значения this.props.data, state не изменяется.

Нет никакой необходимости определять renderNews как стрелочную функцию, ее следует переделать в метод класса.

Было:
renderNews = () => {};
стало:
renderNews() {}

Я бы внес в renderNews следующие изменения, помимо переделывания в метод класса:
1. ранний return вместо переменной и блока else,
2. замена обычной функции на стрелочную в колбеке map.

Результат:

renderNews() {
  const { filteredNews } = this.state;

  if (filteredNews.length) {
    return filteredNews.map(item => (
      <Article key={item.id} data={item} />
    ));
  }

  return <p>К сожалению новостей нет</p>;
}

Comments

[japan123]

Нет никакой необходимости определять renderNews как стрелочную функцию, ее следует переделать в метод класса.

Добрый день! Как понять, когда использовать стрелочную функцию, а когда метод класса?

[Антон Спирин]

japan123, стрелочные функции стоит использовать, только когда функция куда-либо передается, например:

class Example extends React.Component {
  foo = () => {};

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

Если же функция вызывается следует использовать метод:

class Example extends React.Component {
  foo() {}

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

Понятное дело, что в первом случае тоже можно использовать метод, забиндив его в конструкторе, но стрелочная функция в этом случае будет удобней.

[japan123]

Антон Спирин, а почему не стоит просто везде стрелочную функцию использовать? на производильность влияет?

[Антон Спирин]

japan123, да не особо, на самом деле. При создании каждого экземпляра компонента создаётся новая копия функции.
Но если вы рендерите список, то стрелочных функций в списках создастся столько же копий, сколько элементов списка. В случае использования метода, они все будут использовать одну функцию из прототипа.
Поэтому для списков даже хандлеры, написанные, в виде стрелочных функций лучше передавать из родителя.