Javascript 如何在已经安装的组件中重置道具更改状态？

我有一个

组件，它可能是一个无状态函数组件，但由于以下原因，它被证明是一个类有状态组件：

它呈现的blogPost项目（接收为

道具

）具有嵌入在其html标记内容中的图像，我使用

标记的

库对其进行解析，并呈现为blogPost，在其段落、h1、h2、h3等之间具有图像

事实上，在将帖子内容呈现给我的客户端之前，我需要预加载这些图像。我认为如果你开始阅读一个段落，它突然下降了400px，这是一场用户体验灾难，因为在你阅读它的时候，加载的图像已经被装载到DOM中

因此，我宁愿通过渲染

来保持，直到图像准备就绪。这就是为什么

是具有以下代码的类组件：

class BlogPost extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      pending: true,
      imagesToLoad: 0,
      imagesLoaded: 0
    };
  }

  preloadImages(blogPostMedia) {
    this.setState({
      pending: true,
      imagesToLoad: 0,
      imagesLoaded: 0
    });

    ... some more code ...
    // Get images urls and create <img> elements to force browser download
    // Set pending to false, and imagesToLoad will be = imagedLoaded
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.props !== nextProps) {
      this.preloadImages(nextProps.singleBlogPost.media);
    }
  }

  componentDidMount() {
    this.preloadImages(this.props.singleBlogPost.media);
  }

  render() {
    return(
        this.state.pending ?
          <Spinner/>
        : (this.state.imagesLoaded < this.state.imagesToLoad) ?
            <Spinner/>
          : <BlogPostStyledDiv dangerouslySetInnerHTML={getParsedMarkdown(this.props.singleBlogPost.content)}/>
    );
  }
}

export default BlogPost;

类BlogPost扩展React.Component{
建造师（道具）{
超级（道具）；
这个州={
待定：正确，
imagesToLoad:0，
imagesLoaded:0
};
}
预加载图像（blogPostMedia）{
这是我的国家({
待定：正确，
imagesToLoad:0，
imagesLoaded:0
});
…更多的代码。。。
//获取图像URL并创建元素以强制浏览器下载
//将pending设置为false，imagesToLoad将=imagedLoaded
}
不安全组件将接收道具（下一步）{
如果（this.props！==nextrops）{
preload.images（nextrops.singleBlogPost.media）；
}
}
componentDidMount（）{
this.preload图像（this.props.singleBlogPost.media）；
}
render（）{
返回(
这个，州，待定？
：（this.state.imagesLoaded

起初，我只在

componentDidMount（）

方法中调用

preload images（）

。这在我用它呈现的第一篇文章中完美无瑕

但只要我点击下一个帖子链接；由于我的

组件已经挂载，

组件didmount（）

不会再次被调用，我通过单击链接（这是一个单页应用程序）呈现的所有后续帖子都不会受益于

preload images（）

功能

因此，我需要一种方法来重置

状态

，并在更新周期内预加载作为

道具

接收的新博客帖子的图像，因为

组件已经安装

---

我决定从

UNSAFE\u component willreceiveprops（）

方法内部调用相同的

preloimages（）

函数。基本上，它是将我的

状态

重置为初始条件，因此会立即显示

，并且只有在加载所有图像后才会呈现博客文章

它按预期的方式工作，但由于该方法的名称包含“不安全”一词，我很好奇是否有更好的方法。尽管我认为我没有在里面做任何“不安全”的事情。我的组件仍然尊重它的

道具

，并且无论如何都不会改变它们。它刚刚被重置为初始行为

---

概述：我需要的是一种方法，将已安装的组件重置为其初始

状态

，并调用

preload images（）

方法（在更新周期内），使其表现为新安装的组件。有没有更好的方法或者我做的很好？谢谢。

组件WillReceiveProps

已被弃用，应根据具体情况替换为

getDerivedStateFromProps

或

componentDidUpdate

由于

preload-images

是异步副作用，因此应该在

componentDidMount

和

componentdiddupdate

中调用它：

  componentDidMount() {
    this.preloadImages(this.props.singleBlogPost.media);
  }

  componentDidUpdate() {
    this.preloadImages(this.props.singleBlogPost.media);
  }

---

componentWillReceiveProps

已被弃用，根据具体情况，应将其替换为

getDerivedStateFromProps

或

componentdiddupdate

由于

preload-images

是异步副作用，因此应该在

componentDidMount

和

componentdiddupdate

中调用它：

  componentDidMount() {
    this.preloadImages(this.props.singleBlogPost.media);
  }

  componentDidUpdate() {
    this.preloadImages(this.props.singleBlogPost.media);
  }

---

我会停止使用组件willreceiveprops（）（）。如果您不希望出现这种不和谐的效果，可以避免这种情况的一种方法是从

的父级加载信息，并且仅在加载信息后，将其作为道具传递到

---

但无论如何，您可以使用

键

s从头开始重新创建组件（），将组件重置回其原始状态。

我将停止使用

组件WillReceiveProps（）。如果您不希望出现这种不和谐的效果，可以避免这种情况的一种方法是从
的父级加载信息，并且仅在加载信息后，将其作为道具传递到

但是无论如何，您可以使用
键
s从头开始重新创建组件（），从而将组件重置回其原始状态。
旧名称
组件WillReceiveProps
已被弃用，并将在将来的版本中停止工作。带有
UNSAFE
前缀的新方法名称未被弃用，并且将继续工作，从这个链接可以理解。不安全组件将接收道具视为遗留。不鼓励使用不安全的方法是有很好的理由的，因为它们在17中不能很好地处理异步渲染。这就是为什么我试图摆脱它。另一个答案的
键
提示帮我解决了这个问题。非常感谢。旧名称
组件WillReceiveProps
已被弃用，并将在未来版本中停止工作。带有
UNSAFE
前缀的新方法名称未被弃用，并且将继续工作，从这个链接可以理解。不安全组件将接收道具视为遗留。不鼓励使用不安全的方法有很好的理由，因为它们不会很好地发挥作用