React 16.3中从props更新canvas的正确生命周期方法是什么？

React 16.3中从props更新canvas的正确生命周期方法是什么？

使用

componentDidUpdate

的DOM *** 作是这样的。

shouldComponentUpdate

对于只有一个始终具有相同道具的单个孩子的组件，A
并不会真正起作用。因此，您应该能够删除它，而性能没有明显差异。

如果您已经分析了应用程序 并确定在这种特殊情况下 确实 有所作为，则可以将元素提升到构造函数中。

这样，React会完全跳过它（有效的工作方式与相同

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;  }}

您还可以将其分为两个部分：

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)}      />;  }}