5.4 KiB
5.4 KiB
id | title | challengeType | forumTopicId | dashedName |
---|---|---|---|---|
5a24c314108439a4d4036180 | 使用 shouldComponentUpdate 优化重新渲染 | 6 | 301398 | optimize-re-renders-with-shouldcomponentupdate |
--description--
到目前为止,如果任何组件接收到新的state
或新的props
,它会重新渲染自己及其所有子组件。这通常是好的。但是 React 提供了一种生命周期方法,当子组件接收到新的state
或props
时,你可以调用该方法,并特别声明组件是否应该更新。方法是shouldComponentUpdate()
,它将nextProps
和nextState
作为参数。
这种方法是优化性能的有效方法。例如,默认行为是,当组件接收到新的props
时,即使props
没有改变,它也会重新渲染。你可以通过使用shouldComponentUpdate()
比较props
来防止这种情况。该方法必须返回一个布尔值,该值告诉 React 是否更新组件。你可以比较当前的 props(this.props
)和下一个 props(nextProps
),以确定你是否需要更新,并相应地返回true
或false
。
--instructions--
shouldComponentUpdate()
方法添加到名为OnlyEvens
的组件中。目前,该方法返回true
,因此每次收到新的props
时,OnlyEvens
都会重新渲染。修改该方法,以便OnlyEvens
仅在其新 props 的value
为偶数时更新。单击Add
按钮,在触发其他生命周期钩子时,在浏览器控制台中查看事件的顺序。
--hints--
Controller
组件应该将OnlyEvens
组件渲染为子组件。
assert(
(() => {
const mockedComponent = Enzyme.mount(React.createElement(Controller));
return (
mockedComponent.find('Controller').length === 1 &&
mockedComponent.find('OnlyEvens').length === 1
);
})()
);
应该在OnlyEvens
组件上定义shouldComponentUpdate
方法。
assert(
(() => {
const child = React.createElement(OnlyEvens)
.type.prototype.shouldComponentUpdate.toString()
.replace(/s/g, '');
return child !== 'undefined';
})()
);
OnlyEvens
组件应该返回一个h1
标签,该标签渲染this.props.value
的值。
async () => {
const waitForIt = (fn) =>
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
const mockedComponent = Enzyme.mount(React.createElement(Controller));
const first = () => {
mockedComponent.setState({ value: 1000 });
return waitForIt(() => mockedComponent.find('h1').html());
};
const second = () => {
mockedComponent.setState({ value: 10 });
return waitForIt(() => mockedComponent.find('h1').html());
};
const firstValue = await first();
const secondValue = await second();
assert(firstValue === '<h1>1000</h1>' && secondValue === '<h1>10</h1>');
};
只有在nextProps.value
为偶数时,OnlyEvens
才会重新渲染。
async () => {
const waitForIt = (fn) =>
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
const mockedComponent = Enzyme.mount(React.createElement(Controller));
const first = () => {
mockedComponent.setState({ value: 8 });
return waitForIt(() => mockedComponent.find('h1').text());
};
const second = () => {
mockedComponent.setState({ value: 7 });
return waitForIt(() => mockedComponent.find('h1').text());
};
const third = () => {
mockedComponent.setState({ value: 42 });
return waitForIt(() => mockedComponent.find('h1').text());
};
const firstValue = await first();
const secondValue = await second();
const thirdValue = await third();
assert(firstValue === '8' && secondValue === '8' && thirdValue === '42');
};
--seed--
--after-user-code--
ReactDOM.render(<Controller />, document.getElementById('root'));
--seed-contents--
class OnlyEvens extends React.Component {
constructor(props) {
super(props);
}
shouldComponentUpdate(nextProps, nextState) {
console.log('Should I update?');
// Change code below this line
return true;
// Change code above this line
}
componentDidUpdate() {
console.log('Component re-rendered.');
}
render() {
return <h1>{this.props.value}</h1>;
}
}
class Controller extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 0
};
this.addValue = this.addValue.bind(this);
}
addValue() {
this.setState(state => ({
value: state.value + 1
}));
}
render() {
return (
<div>
<button onClick={this.addValue}>Add</button>
<OnlyEvens value={this.state.value} />
</div>
);
}
}
--solutions--
class OnlyEvens extends React.Component {
constructor(props) {
super(props);
}
shouldComponentUpdate(nextProps, nextState) {
console.log('Should I update?');
// Change code below this line
return nextProps.value % 2 === 0;
// Change code above this line
}
componentDidUpdate() {
console.log('Component re-rendered.');
}
render() {
return <h1>{this.props.value}</h1>;
}
}
class Controller extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 0
};
this.addValue = this.addValue.bind(this);
}
addValue() {
this.setState(state => ({
value: state.value + 1
}));
}
render() {
return (
<div>
<button onClick={this.addValue}>Add</button>
<OnlyEvens value={this.state.value} />
</div>
);
}
}