reactjs - 即使组件仍然被渲染，React props 也会被评估

Question

我的组件有一个包装器，告诉它们在完成加载之前不要渲染，看起来像这样

import React from 'react';
import LoadingSpinner from 'vivid.react.components/atoms/LoadingSpinner';

class Wrapper extends React.Component {
    componentDidMount() {
        this.props.getInitialState();
    }

    render() {
        const { error, isLoadingInitialState } = this.props;
        return (
            <div className='wrapper'>
                {!!error && <div>Error: {error.message}</div>}
                {isLoadingInitialState
                    ? <LoadingSpinner/>
                    :  children
                }
            </div>
        )
    }
};

export default Wrapper;

但是，当我在 Context Consumer 中使用这个包装器时，即使 LoadingInitialState 为 true 并且不应该渲染子代，子代的 props 仍在评估中。

const Screen = () => {
    <div>
     <Context.Consumer>
      {(context) => {
          <Wrapper isLoadingInitialState={context.isLoadingInitialState} getInitialState={context.getInitialState)>
            <ChildComponent price = {context.data.props}/> // throws an error because data is undefined
          </Wrapper>
      }}
    </Context.Context>
}

任何人都可以解释为什么 ChildComponents 道具仍在被评估，即使它没有被渲染？有没有更好的解决方案来做到这一点？