React 16.3中用于从道具更新画布的正确生命周期方法是什么？ [英] What is correct lifecycle method in React 16.3 to update canvas from props?

问题描述

我有一个Canvas组件，看起来大致如下：

I have a Canvas component, which looks approximately like this:

class Canvas extends React.Component{

    saveRef = node => {
        this._canvas = node;
    }
    
    shouldComponentUpdate(){
        /*I will never re-render this component*/
        return false;
    }
    
    componentWillReceiveProps( nextProps ){
        /*Here I do manipulations with this._ctx, when new props come*/
    }
    
    render(){
        return (
            <canvas ref={this.saveRef} />
        );
    }
    
    componentDidMount(){
        this._ctx = this._canvas.getContext( "2d" );
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

React社区开始弃用 componentWillReceiveProps ，以便用 getDerivedStateFromProps 替换它。我可以使用 componentDidUpdate 来执行我的绘图，但后来我需要删除 shouldComponentUpdate 而且我会有很多无用的东西渲染电话。当新道具出现时，在react 16.3中更新我的组件的正确高效方法是什么？

React community began to deprecate componentWillReceiveProps in order to replace it with getDerivedStateFromProps. I can use componentDidUpdate to perform my drawings, but then I need to remove shouldComponentUpdate and I will have a lot of useless render calls. What is the correct performant way to update my component in react 16.3, when new props come?

推荐答案

使用 componentDidUpdate 用于像这样的DOM操作。对于具有始终具有相同道具的单个子组件的组件， shouldComponentUpdate 不会产生任何影响。所以你应该能够删除它而不会在性能上有显着差异。

Use componentDidUpdate for DOM manipulations like this. A shouldComponentUpdate won’t really make a difference for a component with a single child that always has the same props. So you should be able to remove it without a significant difference in performance.

如果您已经分析了应用程序并确定在此特定如果它确实有所不同，你可以将元素提升到构造函数中。

If you've profiled the application and determined that in this particular case it does make a difference, you can hoist the element into constructor.

这样React将完全跳过它（这有效地工作了与相同的方式：shouldComponentUpdate ）：

This way React will skip over it completely (which effectively works the same way as shouldComponentUpdate):

class Canvas extends React.Component {
  constructor(props) {
    super(props);
    this._ctx = null;
    this._child = <canvas ref={node => {
      this._ctx = node ? node.getContext('2d') : null
    } />;
  }

  componentDidUpdate(prevProps){
    // Manipulate this._ctx here
  }

  render() {
    // A constant element tells React to never re-render
    return this._child;
  }
}

您还可以将其拆分为两个组件：

You could also split it into two components:

class Canvas extends React.Component {
  saveContext = ctx => {
    this._ctx = ctx;
  }

  componentDidUpdate(prevProps){
    // Manipulate this._ctx here
  }

  render() {
    return <PureCanvas contextRef={this.saveContext} />;
  }
}


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

  render() {
    return (
      <canvas
        ref={node => node ? this.props.contextRef(node.getContext('2d') : null)}
      />;
  }
}

这篇关于React 16.3中用于从道具更新画布的正确生命周期方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！