javascript-在useEffect中将componentDidUpdate代码与DidMount和UnMount一起使用

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-在useEffect中将componentDidUpdate代码与DidMount和UnMount一起使用，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3334字，纯文字阅读大概需要5分钟。

内容图文

我正在尝试将我的代码迁移到支持react挂钩的新react上.我正在使用useReducer,useState和useEffect.我可以在代码中使用DidMount和UnMount,但对如何实现DidUpdate部分一无所知,因为这可能会导致重新渲染问题.

这是我做的

旧代码

class ImageBoard extends React.Component {
    constructor() {
      super();
      this.state = {
        canvas: undefined,
        selected: undefined
      };
    }

    handleDeleteKey(event) {
      if (event.keyCode === 46 || event.keyCode === 8) {
        event.preventDefault();
        if (this.state.selected !== undefined) {
          this.state.canvas.remove(this.state.selected);
          this.setState({ selected: undefined });
        }
      }
    }

    componentDidMount() {
      const canvas = new fabric.Canvas("canvas");
      document.addEventListener("keydown",this.handleDeleteKey.bind(this),false);
      canvas.on("object:selected", e => this.setState({ selected: e.target }));
      canvas.on("selection:cleared", e => this.setState({ selected: undefined }));
      this.setState({ canvas: canvas });
      this.setCanvasBackground(this.props.getSelectedImage, canvas);
    }

    componentDidUpdate(prevProps) {
      if (prevProps.getSelectedImage !== this.props.getSelectedImage) {
        this.setCanvasBackground(this.props.getSelectedImage,this.state.canvas);
      }

    }

更改为以下新代码

const ImageBoard = () => {
  let canvasEl = React.useRef(null);
  const [selected, setSelected] = React.useState(null)
  const [canvas, setCanvas] = React.useState(null)
 const [state, _] = React.useReducer(imagesReducer, [])

  const handleDeleteKey = event => {
    if (event.keyCode === 46 || event.keyCode === 8) {
      event.preventDefault();
      if (selected !== undefined) {
        canvas.remove(selected);
        setSelected(undefined);
      }
    }
  }

  React.useEffect(() => {
    const canvas = new fabric.Canvas("canvas");
    document.addEventListener(
      "keydown",
      handleDeleteKey,
      false
    );
    canvas.on("object:selected", e => setSelected(e.target));
    canvas.on("selection:cleared", e => setSelected(undefined));
    setCanvas(canvas);
    setCanvasBackground(state.images.selectedImage, canvas);
    return () => {
      document.removeEventListener("keydown", handleDeleteKey, false);
    }
  }, [])

我如何在useEffect中编写以下代码片段？

componentDidUpdate(prevProps) {
          if (prevProps.getSelectedImage !== this.props.getSelectedImage) {
            this.setCanvasBackground(this.props.getSelectedImage,this.state.canvas);
          }
          this.setCanvasBackground(this.props.getSelectedImage,this.state.canvas);
        }

解决方法:

如果目的是避免在接收到相同的道具时发生不必要的更新,并且这不仅适用于getSelectedImage,而且适用于所有道具,则可以使组件纯净：

const ImageBoard = memo(props => { ... });

因此,仅当收到新的道具(包括useEffect)时,才重新渲染组件：

  useEffect(() => {
    // runs every time the component is rendered
    setCanvasBackground(props.getSelectedImage, canvas);
  })

如果仅在收到特定道具的新值??(例如getSelectedImage)的新值时才评估组件的一部分,则根据情况使用useMemo或useEffect挂钩完成此操作.由于useEffect可以同时充当componentDidUpdate和componentDidMount,因此应将其考虑在内.

  useEffect(() => {
    // runs once on mount
    const canvas = new fabric.Canvas("canvas");
    document.addEventListener(
      "keydown",
      handleDeleteKey,
      false
    );
    canvas.on("object:selected", e => setSelected(e.target));
    canvas.on("selection:cleared", e => setSelected(undefined));
    setCanvas(canvas);
    // setCanvasBackground is moved to another hook
    return () => {
      document.removeEventListener("keydown", handleDeleteKey, false);
    }
  }, [])

  useEffect(() => {
    // runs every time new getSelectedImage is received, including initial render
    setCanvasBackground(props.getSelectedImage, canvas);
  }, [props.getSelectedImage])

内容总结

以上是互联网集市为您收集整理的javascript-在useEffect中将componentDidUpdate代码与DidMount和UnMount一起使用全部内容，希望文章能够帮你解决javascript-在useEffect中将componentDidUpdate代码与DidMount和UnMount一起使用所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端