hooks和类组件的区别

为什么我么要使用hooks呢，这一点很多人可能觉得没必要去探究，觉得官方初的东西只要好用就行，对于这一点我觉得最重要的还是要去学习大佬们为什么去设计hooks，解决了什么问题，设计的思路是什么？React团队在设计层面的思路能够在一定程度上代表着当前业界在框架设计领域上的最佳实践。

函数组件的写法更轻量、灵活

在函数组件中我们不需要去继承一个class对象，不需要去记忆那些生命周期，不需要把数据定义在state中。函数作为js中的一等公民，可以让我们更加高效更加灵活的去组织代码。

类组件的自身缺陷

1、如果我们需要一个只跟着视图走的数据，我们不能直接使用props或者state。这个我们可以通过一个实例来看看。

class ProfilePage extends React.Component {
   
  showMessage = () => {
   
    alert('Followed ' + this.props.user);
  };

  handleClick = () => {
   
    setTimeout(this.showMessage, 3000);
  };

  render() {
   
    return <button onClick={
   this.handleClick}>Follow</button>;
  }
}

function ProfilePage(props) {
   
  const showMessage = () => {
   
    alert('Followed ' + props.user);
  };

  const handleClick = () => {
   
    setTimeout(showMessage, 3000);
  };

  return (
    <button onClick={
   handleClick}>Follow</button>
  );
}

上面用类组件和函数组件实现了同一个逻辑，两个组件都会接受到来自父组件传过来的props.user,在点击按钮之后会在3秒之后alert一条消息。

假如我一开始传入的props值是小红，然后在三秒之内去改变props.user的值，变成小绿，这两个组件会分别输出小绿和小红。为什么会这样呢？这里我先只介绍类组件， 在React的类组件中，props虽然是不变的，但是this永远是可变。当有异步的事件触发，它获取到的props或者state永远都是最新的。

2、使用bind或者箭头函数去约束我们函数中this的作用域

3、状态逻辑的难以复用以及复杂组件变得难以理解

对于状态逻辑的复用，虽然在类组件中也可以使用高阶组件+继承解决，但hooks似乎有更好的解决方案。而对于复杂组件难以理解是在平时写代码的时候最常见的一个问题，一个组件写着写着状态越来越多，如果抽成子组件的话props和state又要传来传去，最后自己也看不懂，下面也举个实例。

---

对于状态逻辑的复用这种场景只要页面中有复用的组件，且这个组件又有较为复杂的状态逻辑，就会有这样的需求，举个常见的例子：在做后台系统中经常需要去做各种展示的列表，表格的内容各不相同，但是又都要有分页的行为，于是分页组件 就需要去抽象。

---

传统类组件

最开始我们可能不会想着通用，就直接写一个列表+分页的组件，

import {
    Component } from 'react';
export default class ListWithPagination extends Component {
   
  state = {
   
    page: 1,
    data: [],
}

componentDidMount() {
   
	this.fetchListData(this.setState);
}

handlePageChange = newPage =>
this.setState({
    page: newPage }, this.fetchListData)

fetchListData = ()