前言

有价值的参考文章《轻松学会 React 钩子：以 useEffect() 为例》

写惯了类式组件，突然想试下函数式组件，可发现获取数据时组件渲染了4次，比函数式组件多1次。
在线示例请看《React组件比较》

类式组件

ts写的类式组件如下：

export interface HomeSub1Props {}
export interface HomeSub1State {
  datas: any;
}
let renderCount = 0;
let queryCount = 0;
class HomeSub1 extends React.Component<HomeSub1Props, HomeSub1State> {
  constructor(props: HomeSub1Props) {
    super(props);
    this.state = {
      datas: undefined
    };
  }
  componentDidMount() {
    this.queryDatas();
  }

  queryDatas() {
    console.log("我被调用了！");
    queryCount++;
    fetch(
      "https://elevation3d.arcgis.com/arcgis/rest/services/World_Imagery/MapServer?f=json"
    )
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
        this.setState({
          datas: data
        });
      });
  }

  onRefresh() {
    this.queryDatas();
  }

  render() {
    renderCount++;
    console.log(renderCount);
    return (
      <div>
        <div>查询次数{queryCount}</div>
        <div>查询数据{this.state.datas?.currentVersion}</div>
        <div>渲染次数{renderCount}</div>
        <button onClick={this.onRefresh.bind(this)}>刷新数据 </button>
      </div>
    );
  }
}

执行上述代码，发现渲染如下：
在这里插入图片描述
点击“刷新数据”，渲染如下，发现渲染次数增加了2次

注释掉componentDidMount里的查询方法，发现渲染了1次

函数式组件

let renderCount = 0;
let queryCount = 0;
function HomeSub2() {
  const [datas, setDatas] = useState(undefined);
  function queryDatas() {
    console.log("我被调用了！");
    queryCount++;
    fetch(
      "https://elevation3d.arcgis.com/arcgis/rest/services/World_Imagery/MapServer?f=json"
    )
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
        setDatas(data);
      });
  }

  useEffect(() => {
    queryDatas();
  }, []);

  function onRefresh() {
    this.queryDatas();
  }
  renderCount++;
  return (
    <div>
      <div>查询次数{queryCount}</div>
      <div>查询数据{datas?.currentVersion}</div>
      <div>渲染次数{renderCount}</div>
      <button onClick={onRefresh}>刷新数据 </button>
    </div>
  );
}