Question

我在React组件中有一个WebGL“查看器”设置。

我以前依靠componentWillReceiveProps来更新WebGL查看器的状态：

class Viewer extends React.Component<Props, State> {
  constructor(props: Props) {
    this._webGLRenderer = new AwesomeWebGL();
  }

  public componentWillReceiveProps(nextProps) {
    if (this.props.models.length !== nextProps.models.length) {
      // find new model
      const newModel = ...
      this._webGLRenderer.add(newModel);
    }
  }

但是不建议使用componentWillReceiveProps，因此我不确定哪种情况是推荐的方法。受控和不受控制似乎不是很好的匹配。

我可以使用shouldComponentUpdate方法，但这在性能方面还是很糟糕的。

我认为在我的情况下使用refs可能是合适的，它公开了一种新的“添加”方法：

// to be access via ref from parents
public addModelToRenderer(model) {
  this._webGLRenderer.add(model);
}

在我的情况下，哪种方法值得推荐？

Answer 1

在React v16.3及更高版本中，它将为getDerivedStateFromProps。如果您使用的是React v16.3，则可以尝试使用componentDidUpdate。但是您应该进行适当的检查，否则它将进入无限循环。

属性更改后更新React组件内部对象

1 个答案: