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