如何仅刷新 React 中的单个项目？

Question

我有这个 App React 组件（TypeScript）：

class App extends React.Component {

public state = {
    text: ''
}

constructor(props: any) {
    super(props);
    this.state = { text: 'something' };
}

public handleClick = () => {
    const date = `new ! : ${new Date().toString()}`;

    // tslint:disable-next-line:no-console
    console.log('click ! : ' + date);

    this.setState({
        text: date
    });
};

public render() {
    return (
        <div className="App">
            <button onClick={this.handleClick}>Button</button>
            <p>{this.state.text}</p>
            <Hello />
        </div>
    );
}
}

还有这个 Hello 组件：

export class Hello extends React.Component {
@lazyInject("nameProvider")
private readonly nameProvider: IProvider<string>;

public render() {
    return <h1>Hello {this.nameProvider.provide()}!</h1>;
}
}

nameProvider 是一个简单的提供者，它基于随机数返回一个字符串。

单击按钮时，日期会更新，但每次都会重新渲染 Hello 组件。

这是预期的吗？如果是，请解释。

这种行为可以改变吗？

查看完整示例项目here...

Answer 1

您可以通过扩展React.PureComponent 使Hello 组件成为PureComponent，这样它就不会在每个父渲染上重新渲染

export class Hello extends React.PureComponent {

    @lazyInject("nameProvider")
    private readonly nameProvider: IProvider<string>;

    public render() {
        return <h1>Hello {this.nameProvider.provide()}!</h1>;
    }

}