Реагируйте повторно на рендеринг массива, тогда как ключ элемента не изменился

Question

Очень простой пример кода из списка:

class List extends React.Component {
    render() {
        const listComponent = this.props.numbers.map((number) =>
            <Item key={ number.toString() } value={ number } />,
        );

        return (
            <div>
                <button onClick={ () => this.setState({ test: 1 })}>Re-render list</button>
                { listComponent }
            </div>
        );
    }
}

Вот этот пункт:

class Item extends React.Component {
    render() {
        return (
            <div>{ this.props.value + ', rendered time:' + new Date().getTime() }</div>
        );
    }
}

Когда я нажимаю кнопку, состояние обновляется, поэтому компонент List перерисовывается.

Однако, если мое понимание верно, элементы не должны быть повторно обработаны, так как ключевой элемент не изменился. Но он рендерится заново, так как метка времени обновляется.

Может кто-нибудь объяснить мне, почему?

Answer 1

Ваше понимание совершенно неверно

Вся цель key, для ordering скорее, чем rendering, Изображение у вас есть элементы a, b, c, d и переупорядочить их с помощью переключателей a и c, то есть c, b, a, d. Без ключа крайне сложно отреагировать, чтобы выяснить, как перейти от старого виртуального DOM к новому виртуальному DOM.

Пожалуйста, прочтите этот https://facebook.github.io/react/docs/lists-and-keys.html

Answer 2

Повторно визуализируя компонент, вы также запускаете повторную визуализацию цепной реакции для всех дочерних компонентов.

Если вы хотите предотвратить повторную визуализацию дочернего компонента (например, если некоторые из пропущенных реквизитов не изменились), вы можете использовать метод жизненного цикла. shouldComponentUpdate(),

class Item extends React.Component {
    shouldComponentUpdate(nextProps) {
        // only re-render if props.value has changed
        return this.props.value !== nextProps.value;
    }

    render() {
        return (
            <div>{ this.props.value + ', rendered time:' + new Date().getTime() }</div>
        );
    }
}

Answer 3

Всякий раз, когда изменяется ваше состояние, весь компонент будет перерисовываться React. По умолчанию true если вы не установили shouldComponentUpdate() функция для возврата false, Посмотрите на жизненный цикл компонентов React.