react.component

Question

有一个 react.Component 只想被 react-dom render 一次 不在进行任何监听或者处理，又这样的render Api吗。

class CommonLocation extends React.Component<any, any> {
  public state = initState;

  private onClick(item: { name: string; lonlat: string }) {
    console.log(item, this);
  }

  public render() {
    return (
      <div className="btn-group ol-quick-location" role="group" aria-label="快速定位">
        {this.state.btnCollection.map(item => (
          <button type="button" className="btn btn-sm btn-default" key={item.name} aria-label={item.name} data-lonlat={item.lonlat} onClick={this.onClick.bind(this, item)}>
            {item.name}
          </button>
        ))}
      </div>
    );
  }
}

export default class CommonLocationControl extends Control {
  constructor(options: any = {}) {
    let dom = document.createElement('div');

    render(<CommonLocation />, dom);
    super({
      element: dom,
      ...options,
    });
    dom = null;
  }
}

此处我只需要CommonLocation完成我预设的功能就好，不需要过多利用react一些机制。 贴近采用js原生操作。
如何进行优化。

Answer 1

使用

import React, { PureComponent } from 'react';
class CommonLocation extends PureComponent {
    ...
}