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

当你认为 React HOC 只是一个父组件时，理解起来没什么大不了的。

现在，猜猜当子组件从父组件接收到 props 时会发生什么？

子组件将被重新渲染。

父组件渲染发生了什么？

父组件也被重新渲染，因为它的 props 改变了。

同样的事情也适用于 HOC。因此，只要道具/状态发生变化，WrapperComponent 也会重新渲染。

React 中的渲染过程是如何进行的？

How the render process is going in React?

reactjs

higher-order-components