如何优雅地使用React Hooks

一、理解什么是Hooks

在React中，Hooks其实就是一个函数，这个函数的命名以use开头、函数return一个结果；React Hooks其实就是封装了一些通用的、公共的方法，就是一些通用的工具。

二、React Hooks分为官方Hooks和自定义Hooks

官方Hooks是指React官方推荐的一些Hooks，如：useState、useEffect、useContext、useRef、useMemo、useCallback、useReducer、......；

1.useState：让React函数组件也可以使用状态，使用方法：const [ age, setAge ] = useState(35).

2.useEffect：在React函数组件里，没有组件生命周期这一说法，所以可以使用useEffect来替代组件生命周期，使用方法如下：

javascript">useEffect( () => {
    window.addEventListener('message', handleMessage );

    return () => {
        window.removeEventListener('message', handleMessage );
    }
}, [] )

useEffect接收的一个回调函数相当于是componentDidMount和componentDidUpdate，回调函数return的这一个回调相当于是componentWillUnmount；useEffect接收的第二个数组是依赖项，如果只是模拟组件生命周期，可以传空数组，通常这个依赖项不要传入过多或过于复杂，因为当依赖项发生变化useEffect中的回调函数会重新执行。

3.useContext：用于父组件向子组件的跨级传参，使用比较简单，直接参考官方文档即可。

4.useRef：绑定元素ref，通常用于调用子组件身上的方法；this.formRef.current.doReq()...。

5.useMemo：用于缓存函数的计算结果，与Vue中的计算属性类似；使用方法如下：

javascript">const result = useMemo( () => {
    const res = a + b;
    return res;
}, [a,b] )

useMemo的第二个参数为依赖项数组，依赖项发生变化则重新计算结果。

6.useCallback：缓存函数（缓存函数地址），通常与React.memo()一起使用；React.memo()是通过校验props中的数据是否改变的来决定组件是否需要重新渲染的一种缓存技术，具体点说React.memo()其实是通过校验Props中的数据的内存地址是否改变来决定组件是否重新渲染组件的一种技术。useCallback通常用于缓存父组件向子组件传递的函数，当父组件发生变化时会重新渲染，此时若变化与子组件无关，子组件不应重复渲染；useCallBack并不能阻止函数重新创建,它只能通过依赖决定返回新的函数还是旧的函数,从而在依赖不变的情况下保证函数地址不变。其使用方法如下：

javascript">import {useCallBack,memo} from 'react';

const Parent = ( props ) => {
    const [parentData, setParentData] = useState(66);  
    
    const toChildFun = useCallBack( () => {
        console.log("需要传入子组件的函数");
        
    }, [])
    
    return (<div>
          <Button onClick={() => setParentState(val => val+1)}>
              点击改变父组件中与Child组件无关的state
          </Button>
          
          <Child fun={toChildFun}></Child>
    <div>)
}

const Child = memo(( props ) => {
    console.log('子组件渲染了');
    return <div>子组件<div>
} )

7.useReducer：相当于写redux，直接根据官方文档进行使用。

官方文档里还有一些其他的Hooks，其实使用起来都比较方便，直接看文档使用就行了，在这里就列举以上几种常用的官方Hooks。

自定义Hooks其实就是根据自己的开发需求，封装一些通用的、公共的工具函数，使用起来其实就和官方推荐的Hooks是一样的。

自定义 Hooks 允许共享有状态逻辑，而不是状态本身，例如：

javascript">import { useState } from 'react';
// 自定义Hooks 
function useCounter(initialValue) {
  const [count, setCount] = useState(initialValue);
  function increment() {
    setCount(count + 1);
  }
  return [count, increment];
}

// 在其他组件进行使用
import useCounter from './useCounter';
function Counter() {
	const [count1, increment1] = useCounter(0);
	const [count2, increment2] = useCounter(100);
  return (
    <div>
      <p>Count1: {count1}</p>
      <button onClick={increment1}>Increment1</button>
       <p>Count2: {count2}</p>
      <button onClick={increment2}>Increment2</button>
    </div>
  );
}

当我们点击 Increment2 时，并不会影响 count1 ,因为每一个 useCounter 的调用都是独立的，其内部状态也是独立的。

三、React Hooks使用方法

1.只能在函数外层调用 Hook，不要在循环、条件判断或者子函数中调用。

2.只能在 React 的函数组件（顶部）和自定义 Hook 中调用 Hook。不要在其他 JavaScript 函数中调用。

3.在组件中 React 是通过判断 Hook 调用的顺序来判断某个 state 对应的 useState的，所以必须保证 Hook 的调用顺序在多次渲染之间保持一致，React 才能正确地将内部 state 和对应的 Hook 进行关联。

四、用Hooks替代一些高阶组件会更有优势

假如现在我们要让多个组件复用一个基于状态的逻辑公共方法：

1.使用高阶组件

javascript">import { Table } from 'antd'
import server from './server'

function useTable(server) {
  return function (WrappedComponent) {
    return class HighComponent extends React.Component {
      state = {
        tableProps: xxx, 
      };
      render() {
        const { tableProps } = this.state;
        return <WrappedComponent tableProps={tableProps} />;
      }
    };
  };
}

@useTable(server)
class App extends Component{
  render(){
    const { tableProps } = this.props;
    return (
      <Table 
        columns={[...]}
      
        {...tableProps}
      />
    )
  }
}

2.使用Hooks

javascript">import { Table } from 'antd'
import server from './api'

function useTable(server) {
  const [tableProps, setTableProps] = useState(xxx);
  return tableProps;
}

function App {
    const { tableProps } = useTable();
    return (
      <Table 
        columns={[...]}
      
        {...tableProps}
      />
    )
}

使用Hooks可以减少组件树的层级，防止组件深度嵌套，同时代码也更少更简洁。