react的class组件改写成带hooks的函数组件，`this.props`应该怎么改写？

Question

试用一下react 16.7alpha中的hooks，下面有个class组件，试改成带hooks的函数组件。

BasicLayout.js原文件

import React, { PureComponent } from 'react';
import MenuBar from '@/components/MenuBar';
import NProgress from 'nprogress';
import withRouter from 'umi/withRouter';
import { connect } from 'dva';
import '@/layouts/nprogress.less';

NProgress.configure({ showSpinner: false });

// 底部有bar菜单
const BarRoutes = ['/shop', '/', '/me', '/category'];

class BasicLayout extends PureComponent {
  render() {
    const { children, location, loading } = this.props;

    let currHref = '';
    const { href } = window.location; // 浏览器地址栏中地址
    if (currHref !== href) {
      // currHref 和 href 不一致时说明进行了页面跳转
      NProgress.start(); // 页面开始加载时调用 start 方法
      if (!loading.global) {
        // loading.global 为 false 时表示加载完毕
        NProgress.done(); // 页面请求完毕时调用 done 方法
        currHref = href; // 将新页面的 href 值赋值给 currHref
      }
    }

    if (BarRoutes.indexOf(location.pathname) < 0) {
      return <div>{children}</div>;
    }

    return (
      <div style={{ overflowX: 'hidden' }}>
        <MenuBar pathname={location.pathname}>{children}</MenuBar>
      </div>
    );
  }
}

export default withRouter(connect(({ app, loading }) => ({ app, loading }))(BasicLayout));

我是这样改的：

import React, { PureComponent } from 'react';
import MenuBar from '@/components/MenuBar';
import NProgress from 'nprogress';
import withRouter from 'umi/withRouter';
import { connect } from 'dva';
import '@/layouts/nprogress.less';

NProgress.configure({ showSpinner: false });


// 底部有bar菜单
const BarRoutes = ['/shop', '/', '/me', '/category'];


function BasicLayout() {
  const { children, location, loading } = this.props;

  let currHref = '';
  const { href } = window.location; // 浏览器地址栏中地址
  if (currHref !== href) {
    // currHref 和 href 不一致时说明进行了页面跳转
    NProgress.start(); // 页面开始加载时调用 start 方法
    if (!loading.global) {
      // loading.global 为 false 时表示加载完毕
      NProgress.done(); // 页面请求完毕时调用 done 方法
      currHref = href; // 将新页面的 href 值赋值给 currHref
    }
  }

  if (BarRoutes.indexOf(location.pathname) < 0) {
    return <div>{children}</div>;
  }

  return (
    <div style={{ overflowX: 'hidden' }}>
      <MenuBar pathname={location.pathname}>{children}</MenuBar>
    </div>
  );

}

export default withRouter(connect(({ app, loading }) => ({ app, loading }))(BasicLayout));

问题：
render()函数中的第一行，即const { children, location, loading } = this.props;中的this.props应该改成什么？

Answer 1

props是无状态组件（即函数）的第一个参数 function Comp(props) {}

Answer 2

hook里props作为函数组件的参数传入，应该这么写

function BasicLayout(props) {
    const { children, location, loading } = props;
    .....
}