重构 UNSAFE_componentWillReceiveProps

Question

我有一个IFrameComponent 组件，灵感来自this post。

基本上是这样的：

class IFrameComponent extends React.Component {
    shouldComponentUpdate() {
        return false;
    }

    componentWillReceiveProps(nextProps) {
        if(this.props.content !== nextProps.content) {
            const html = getHTMLFromContent();
            const fdoc = this.iFrame.contentDocument;
            fdoc.write(html);
        }
    }

    render() {
        return (<iframe sandbox="..." ref={f => this.iFrame = f} />);
    }
}

现在componentWillReceiveProps 被认为是不安全的，我正试图摆脱它。

The ways React advices to refactor componentWillReceiveProps 基本上要么使用static getDerivedStateFromProps 要么使用componentDidUpdate

可悲的是，componentDidUpdate 永远不会被调用，因为shouldComponentUpdate 返回 false（我认为这很好？）而且我无法在静态方法 getDerivedStateFromProps 中访问 this.iFrame 引用。

如何重构这段代码？

Answer 1

我认为，一种可能的方法是：

let iFrameRefs = {}

class IFrameComponent extends React.Component {
    static getDerivedStateFromProps (props) {
        if (iFrameRefs[props.id]) {
            const html = getHTMLFromContent();
            const fdoc = iFrameRefs[props.id].contentDocument;
            fdoc.write(html);
        }
        return null
    }

    shouldComponentUpdate() {
        return false;
    }

    render() {
        return (<iframe sandbox="..." ref={f => iFrameRefs[this.props.id] = f} />);
    }
}

现在从父组件向每个组件传递唯一的 id。也可以在IFrameComponent管理id。

<IFrameComponent id='1' />
<IFrameComponent id='2' />