0

Компоненты перерисовываются при изменении внеших props и собственного state. Чтобы обновить state в соответствии с props, я использую getDerivedStateFromProps. Интересный момент в том, что он вызывается и при setState на компоненте. Этот вопрос был на гитхабе в виде issue и мистер Абрамов ответил что возвращайте из этой функции null, если не хотите чтобы переписался state. В итоге какая то боль - при каждом вызове это статического метода, мне нужно проверять, изменится ли состояние компонента от пропсов ? обновить стэйт : null. Учитывая то, что сложные объекты в жабаскрипт равны, если равны адреса в памяти, на которые они указывают, то эта проверка уже сейчас меня выбешивает. В общем, верю в то что я где то ошибаюсь

2 ответа 2

1

Если в render() будете использовать this.props.someVariable то компонент перерисуется при приходе нового значения в this.props.someVariable без дополнительных телодвижений.

Перерисуется при изменении title:

class ComponentOne extends React.Component {
    render() {
        return <h1>{this.props.title}</h1>;
    }
}

Если надо производить вычисления с новыми props, то можете вынести их в отдельную функцию. Пример ниже тоже перерисует компонент при изменении titles:

class ComponentTwo extends React.Component {
    showTitles() {
        let showRows = [];
        this.props.titles.map((item, index) => {
            showRows.push(
                <li key={index}>{item}</li>;
            );
        });
        return <ul>{showRows}</ul>;
    }

    render() {
        return <div>{this.showTitles()}</div>;
    }
}

Может нет смысла перегонять кучу props в state?

0

Дублирование чего-то из props в state всегда считалось плохой практикой. На мой взгляд, единственное хорошее применение - это нечто вроде uncontrolled элементов управления или форм с возможностью отмены внесённых изменений. Если перекладывание из props в state происходит настолько часто, что начинает выбешивать, то скорее всего ты что-то делаешь не так.

Ну и в качестве костыля положи сам props в state и сравнивай его по ссылке:

class Smth extends React.Component {
  state = { x: -1, y: 0 };

  static getDerivedStateFromProps(props, state) {
    var res = state.props === props ? null : { x: Math.floor(props.x * 2.5), props }
    console.log(`called with ${props.x} ${state.x} ${state.y} - ${!!res}`)
    return res
  }

  componentDidMount() {
    setInterval(() => this.setState({ y: this.state.y + 1 }), 1000)
  }

  render() {
    return (
      <div>{this.props.x} {this.state.x} {this.state.y}</div>
    )
  }
}


class App extends React.Component {
  state = { x: 0 };

  componentDidMount() {
    setInterval(() => this.setState({ x: this.state.x + 1}), 2500)
  }

  render() {
    return (
      <Smth x={this.state.x} />
    )
  }
}

ReactDOM.render(<App />, document.querySelector('main'))
<script crossorigin src="//unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="//unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<main></main>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.