React 16.3中从Props更新Canvas组件的正确生命周期方法是什么？

针对你的Canvas组件场景（组件不重新渲染，仅在props变化时手动操作Canvas上下文），下面是React 16.3及以后版本的正确实现方式：

一、类组件的过渡兼容方案 #

由于你的组件设置了shouldComponentUpdate()返回false，组件不会在props变化时重新渲染，因此componentDidUpdate不会触发。而static getDerivedStateFromProps是静态方法，无法访问组件实例的this._ctx，所以可以先使用**UNSAFE_componentWillReceiveProps**作为过渡（注意：这个方法在未来React版本中会被移除，但目前16.x版本仍可安全使用）：

class Canvas extends React.Component{
  saveRef = node => { this._canvas = node; }
  shouldComponentUpdate(){ /* 保持组件不重新渲染 */ return false; }
  
  // 替代原componentWillReceiveProps，添加UNSAFE_前缀
  UNSAFE_componentWillReceiveProps( nextProps ){ 
    /* 这里依旧可以正常操作this._ctx，处理props变化后的逻辑 */
    if (nextProps.someProp !== this.props.someProp) {
      // 示例：根据新props更新Canvas样式
      this._ctx.fillStyle = nextProps.color;
      // ...其他自定义Canvas操作
    }
  }
  
  render(){ return ( <canvas ref={this.saveRef} /> ); }
  componentDidMount(){ this._ctx = this._canvas.getContext( "2d" ); }
}

二、类组件的长期规范方案 #

如果想要完全遵循React新的生命周期规范，建议调整shouldComponentUpdate的逻辑，改用componentDidUpdate来处理props变化：

1. 移除自定义的shouldComponentUpdate，改用React.PureComponent（自动浅比较props和state，仅当props/state真正变化时才重新渲染）；
2. 在componentDidUpdate中对比前后props，执行Canvas操作：

class Canvas extends React.PureComponent{ // 改用PureComponent做浅比较
  saveRef = node => { this._canvas = node; }
  
  componentDidUpdate(prevProps) {
    // 仅当目标props变化时才执行操作
    if (prevProps.someProp !== this.props.someProp) {
      this._ctx.fillStyle = this.props.color;
      // ...你的Canvas操作逻辑
    }
  }
  
  render(){ return ( <canvas ref={this.saveRef} /> ); }
  componentDidMount(){ this._ctx = this._canvas.getContext( "2d" ); }
}

这样既符合React的新规范，又能保证只有在props真正变化时才执行Canvas操作，同时PureComponent会避免不必要的组件重渲染。

三、函数组件的推荐方案（React 16.8+） #

如果可以将组件转换为函数组件，这是最推荐的方式，结合React.memo（替代类组件的shouldComponentUpdate）和useEffect（监听props变化）：

import React, { useRef, useEffect } from 'react';

const Canvas = React.memo((props) => { // React.memo做props浅比较，避免无意义重渲染
  const canvasRef = useRef(null);
  const ctxRef = useRef(null);

  // 初始化Canvas上下文
  useEffect(() => {
    ctxRef.current = canvasRef.current.getContext('2d');
  }, []);

  // 监听目标props变化，执行Canvas操作
  useEffect(() => {
    ctxRef.current.fillStyle = props.color;
    // ...你的Canvas操作逻辑
  }, [props.color]); // 仅监听需要响应的props字段

  return <canvas ref={canvasRef} />;
});

React.memo会让组件仅在props发生实质性变化时重新渲染，useEffect的依赖数组精准指定了需要监听的props字段，完美替代了原componentWillReceiveProps的逻辑。

内容的提问来源于stack exchange，提问作者Alex Fomin