useHistory 和 props.history 之间的区别

在React中，路由是一个很重要的部分。React-Router提供了我们所需要的路由实现，包括 useHistory 和 props.history 用于管理应用程序的历史记录。这两个API在使用React-Router时会经常被用到，本文将详细介绍二者的区别。

useHistory

useHistory 是 React-Router 提供的 Hooks，它是React函数组件中获取history实例的方式。获取到history实例后，我们就可以使用它来在应用程序中进行路由跳转等操作。

import { useHistory } from "react-router-dom";

function MyComponent() {
  const history = useHistory();

  function handleClick() {
    history.push("/new-page");
  }

  return (
    <button onClick={handleClick}>Go to new page.</button>
  );
}

在上面的代码中，我们使用 import { useHistory } from "react-router-dom"; 语句导入 useHistory，并在函数组件中通过 const history = useHistory(); 获取到 history 实例，然后使用它进行路由跳转。

props.history

props.history 是 Router 和 Switch 等组件渲染的子组件中自动注入的属性。我们可以在 componentDidMount 和 componentDidUpdate 生命周期等方法中通过 this.props.history 来获取实例，然后用它来进行路由操作。

class MyComponent extends React.Component {
  handleClick = () => {
    this.props.history.push("/new-page");
  };

  render() {
    return (
      <button onClick={this.handleClick}>Go to new page.</button>
    );
  }
}

export default withRouter(MyComponent);

在上面的代码中，我们通过 withRouter 高阶函数将 MyComponent 组件包裹起来，然后使用 this.props.history 来进行路由跳转。

区别

1. useHistory 是在函数组件中使用 Hooks 获取 history 实例，而 props.history 是在类组件中自动注入的实例。

2. 使用 useHistory 的组件应该是函数组件，使用 props.history 的组件应该是类组件。

3. useHistory 是React Hooks，只能在React函数组件中使用，而 props.history 可以在类组件中使用。

4. useHistory 不能像 props.history 那样使用 this.history 访问实例。

5. 无论何时，我们都可以通过传递 props 将 history 注入到 React 组件中，但是使用 useHistory 需要注意一些 React 生命周期变化，因为它将其 state 管理绑定到 storage 和 history 之间的交互上。

总结而言，虽然 useHistory 和 props.history 二者都是用来获取 history 实例的，但是二者有一些不同，对于使用 React-Router 来管理路由的开发者可以根据实际需求选择合适的方式去使用。

参考文献：React Router v5 https://reacttraining.com/react-router/web/guides/quick-start (英文)