小编Ale*_*min的帖子

React 16.3中用于从道具更新画布的正确生命周期方法是什么?

我有一个Canvas组件,看起来大致如下:

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" );
    }
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

React社区开始弃用componentWillReceiveProps以替换它getDerivedStateFromProps.我可以componentDidUpdate用来执行我的绘图,但后来我需要删除shouldComponentUpdate,我将有很多无用的渲染调用.当新的道具来临时,在反应16.3中更新我的组件的正确高效方法是什么?

javascript lifecycle canvas reactjs

14
推荐指数
1
解决办法
2657
查看次数

标签 统计

canvas ×1

javascript ×1

lifecycle ×1

reactjs ×1