Refactoring UNSAFE_componentWillReceiveProps

Question

我有一个IFrameComponent组件，灵感来自这篇文章。

它基本上看起来像这样：

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被认为是不安全的，我正试图摆脱它。

React 建议重构 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' />