Как обновить только один элемент в React? - PullRequest
Новая
       27

Как обновить только один элемент в React?

0 голосов
/ 27 декабря 2018

У меня есть Приложение Реагирующий компонент (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>
    );
}
}

И этот Привет компонент: 

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

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

ГдеnameProvider - это простой провайдер, который на основе случайного числа возвращает строку.

При нажатии кнопки Дата обновляется, однако каждый компонент также перерисовывается Hello .время.

Ожидается ли это?Если да, пожалуйста, объясните.

И можно ли изменить это поведение?

Проверить полный пример проекта здесь ...

1 Ответ

0 голосов
/ 27 декабря 2018

Вы можете сделать Hello компонент PureComponent, расширив React.PureComponent, чтобы он не перерисовывался при каждом родительском рендере 

export class Hello extends React.PureComponent {

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

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

}
...