Function 包装防止 componentDidUpdate？

Question

I have a component FancySpanComponent:

class FancySpanComponent extends React.Component {
    render() {
        return (
            <span ref={this.props.innerRef} className={this.props.className }>
                <div style={{ textAlign: "center" }}>rand: {this.props.randomData}</div>
            </span>
        );
    }
}

which I place into a logger wrapper PropsLogger, and that wrapper is created though React.forwardRef() so my main container may play with what the span inside FancySpanComponent (I'm learning React and test whatever situation I can, so please don't judge ^^'):

class PropsLogger extends React.Component {
    componentDidMount() {
        console.log("(Logger) mounting");
    }
    componentDidUpdate(prevProps) {
        console.log("(Logger) Previous:", prevProps);
        console.log("(Logger) New:", this.props);
    }
    render() { return <FancySpanComponent innerRef={this.props.innerRef} {...this.props} />; }
}
const FancySpan = React.forwardRef((props, ref) => <PropsLogger innerRef={ref} {...props} />);

And it works perfectly fine: when a props changes, everything is re-rendered and the old and new props are longed into the console. But if I want to make that wrapper more flexible and work for any component, I have to wrap itself into a function so I can pass the child class name and create it in the logger render() function (that very example comes from the reactjs.org doc):

function propsLoggerWrapper(ClassToLog, props, ref) {
    class PropsLogger extends React.Component {
        componentDidMount() {...}
        componentDidUpdate(prevProps) {...}
        render() { return <ClassToLog innerRef={ref} {...props} />; }
    }

    return <PropsLogger />;
};
const FancySpan = React.forwardRef((props, ref) => propsLoggerWrapper(FancySpanComponent, props, ref));

The problem, in that case, is that each time props change, I don't know why but my logger wrapper and its child are not technically updated: they are dismounted and remounted, thus logger componentDidUpdate() is never fired. Do you have a clue why this is happening in the case of that function call?

Thank you very much in advance.

Answer 1

Try this approach. The HoC approach you were trying seems incorrect.

You have to return a class from inside the function. So that it could be uses like a React Component.

function propsLoggerWrapper(ClassToLog) {
    return class extends React.Component {
    componentDidMount() {}
    componentDidUpdate(prevProps) {}
    render() {
        return <ClassToLog {...this.props} ref={this.props.innerRef} />;
    }
};

const LoggedSpan = propsLoggerWrapper(Span);

const LoggedSpanWithRef = React.forwardRef((props, ref) => (
    <LoggedSpan innerRef={ref} {...props} />
));

Then use it like this, create the spanRef yourself.

<LoggedSpanWithRef ref={this.spanRef} someprop={1} />

Check this Code Sandbox for a workking example

Answer 2

The reason it's unmounting/remounting is that every time FancySpan renders, it's creating a brand new class. A new class means it's a new type of component, and the main way react decides whether to unmount is by whether the types are different. The two types of components consist of identical code, but react doesn't know that.

So what you'll need to do is create the component only once. That means you're going to have to create the component before you know what the values are for the props and ref, so they'll need to be passed in later:

function propsLoggerWrapper(ClassToLog) {
  class PropsLogger extends React.Component {
    componentDidMount() {...}
    componentDidUpdate(prevProps) {...}
    render() { return <ClassToLog {...this.props} />; }
  }
  return PropsLogger;
}

const Temp = propsLoggerWrapper(FancySpanComponent);

const FancySpan = React.forwardRef((props, ref) => <Temp {...props} innerRef={ref} />);

Answer 3

This code seems also to work fine (same as suggested but without the need of an intermédiate temporary object):

function propsLoggerWrapper(ClassToLog) {
  class PropsLogger extends React.Component {
    componentDidMount() {...}
    componentDidUpdate(prevProps) {...}
    render() { return <ClassToLog {...this.props} />; }
  }
  return React.forwardRef((props, ref) => <PropsLogger {...props} innerRef={ref} />);
}

const FancySpan = propsLoggerWrapper(FancySpanComponent);