В лекции "Жизненный цикл React компонента" в части про shouldComponentUpdate() есть пример кода, где состояния counterOne и counterTwo указаны через state, а сам shouldComponentUpdate срабатывает при изменении props. При этом в одной из предыдущих лекций сказано, что state используется, если не используются props через конструктор.
Так откуда появляются this.props.value и nextProps.value, если, насколько я понял, должны использоваться state.value? Или я не внимательно читал и не понял просто? 🙂
// App.js
class App extends React.Component {
state = {
counterOne: 0,
counterTwo: 0,
}
setCounterOne = () => {
this.setState({ counterOne: this.state.counterOne + 1 })
}
setCounterTwo = () => {
this.setState({ counterTwo: this.state.counterOne + 2 })
}
render() {
return (
<div>
<CounterOne
value={this.state.counterOne}
onClick={this.setCounterOne}
/>
<CounterTwo
value={this.state.counterOne}
onClick={this.setCounterOne}
/>
</div>
);
}
}
// CounterOne.js
class CounterOne extends React.Component {
render() {
console.log('render');
return (
<div>
<h1>Counter one</h1>
<div>Value: {this.props.value}</div>
<button onClick={this.props.onClick}>Count</button>
</div>
);
}
}
// CounterTwo.js
class CounterTwo extends React.Component {
shouldComponentUpdate(nextProps) {
// Рендерим компонент только если изменилось свойство value
if (nextProps.value !== this.props.value) {
return true;
} else {
return false;
}
}
render() {
console.log('render');
return (
<div>
<h1>Counter two</h1>
<div>Value: {this.props.value}</div>
<button onClick={this.props.onClick}>Count</button>
</div>
);
}
}