Reactjs 渲染过程是如何进行的？

我刚开始对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也将重新呈现

我是说包裹组件的道具没有改变。

---

这会有多贵呢？

当您认为它只是一个父组件时，理解它并不是什么大问题

现在，猜猜当子组件从父组件接收道具时会发生什么

子组件将被重新渲染

父组件渲染会发生什么情况

父组件也会重新渲染，因为其道具会更改

---

同样的情况也适用于HOC。因此，每当道具/状态发生变化时，WrapperComponent也将重新渲染。

看起来您缺少一个返回，仅供参考。啊，是的…：DEven如果我不将更改的道具传递给子道具，它仍然会重新渲染？@IstvanOrban Yes，，但您可以使用包装器组件内的shouldComponentUpdate回调取消它。就像如果rest道具相同，请取消渲染。。这样你就可以节省额外的渲染了..我明白了，这是有意义的。我的意思是，当我更新节点时，子树也会被更新，这是合乎逻辑的。但我可以通过shouldComponentUpdate或PureComponent来防止这种情况。谢谢你们说得很清楚，伙计们@IstvanOrban如果您使用PureComponent，那么应该内置ComponentUpdate。。如果你认为道具不是扁平的。。然后使用常规组件，实现您自己的shouldComponentUpdate。@bhojendraraauniyar意味着道具只是{x:''，y:}，而不是{x:{a:1}，y:}：