时间戳

首页 > 解决方案 > 如何仅刷新 React 中的单个项目？

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

问题描述

我有这个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组件也会每次重新渲染。

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

这种行为可以改变吗？

在此处查看完整的示例项目...

标签： reactjsrefreshrendersetstate

解决方案

您可以通过扩展来制作Hello组件 a ，这样它就不会在每个父渲染上重新渲染PureComponentReact.PureComponent

export class Hello extends React.PureComponent {

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

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

}

推荐阅读