Как идет процесс рендеринга в React?

Question

Я только начинаю путаться в процессе рендеринга в React.

Допустим, у меня есть компонент высшего порядка, который выглядит примерно так:

const withHOC = () => WrapperComponent =>  {
    return class WithHOC extends React.Component {
        render() {
            //someProps => what will change...
            //...rest => won't change
            const { someProps, ...rest } = this.props
            return(
                <WrapperComponent {...rest} />
            )
        }
    }
}

Это то, где я совсем запутался ... так как someProps изменится, то HOC сам будет перерисовываться. Означает ли это, что WrappedComponent также будет перерисован?

Я имею в виду, что реквизиты WrappedComponent не меняются. И как дорого это может быть?

Answer 1

Реагировать на HOC не составляет особого труда, когда вы думаете, что это просто родительский компонент.

Теперь угадайте, что произойдет, когда дочерний компонент получит реквизит от родительского компонента?

Дочерний компонент будет перерисован.

Что происходит с рендером родительского компонента?

Родительский компонент также перерисовывается, так как изменяется его реквизит.

---

То же самое относится и к HOC. Таким образом, WrapperComponent также будет перерисовывать всякий раз, когда изменяется реквизит / состояние.