react-hooks(实战练习)

（一）State Hook

在class中，我们是通过构造函数中，设置state的

 this.state = {
            list_cus_status: [],   // 客户状态
            list_state_type: [],//状态
            current: 1, // 页数
            pageSize: 10,

        }

在函数中，没有this，所以之前的this都不能分配和读取了，然后在hook中用到了useState

import React, { useState, useEffect } from 'react';//先引入useState

const CustomerAccess = (props) => {
    const [tableData, setDataSource] = useState([]); // 列表
    const [total, setTotal] = useState(); // total
    const [pageSize, setPageSize] = useState(10); // 分页pageSize
    const [currentPage, setCurrentPage] = useState(1); // 分页currentPage
    const [cusStatusData , setCusStatusData] =useState([]); // 客户状态
    const [searchData , setSearchData] =useState(); //查询条件
    }

第一个参数叫做state变量，第二个参数叫做方法（我是这么理解的）当调用第二个参数的时候，可以更新改变当前的state（也就是第一个参数），useState传参就是初始化第一个参数变量

（二）Effect Hook

Effect和周期函数特别类似，可以看做componentDidMount，componentDidUpdate ，componentWillUnmount，这三个函数的组合（三合一）
在class中，很多情况下，我们想在组件加载和更新的时执行同样的操作，这个时候就需要在两个生命周期函数中编写重复代码。
那么useEffect 是怎么执行相同的操作的？

    useEffect(() => {
        // Update the document title using the browser API
        // 如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）
            getTableData();

        if(JSON.stringify(cusStatusData)==='[]'){
            getCusStatusData()
        }

    },[currentPage,pageSize,searchData]);//变量改变的时候才会更新

在组件内部直接调用useEffect，我们可以直接访问到生命的state变量，或者props（我写的这个项目就需要访问到props，因为antd版本是v3，想获取所有表单数据，只能用props去获取，Form.useForm()不可以用）所以每次更新的时候都要运行 Effect，但是两次重渲染之间没有发生变化，这个时候就会通知 React 跳过对 effect 的调用。
以上就是我对useState, useEffect的理解，如有问题，欢迎指出。