先讲概念

再总结

Hooks 初识

官方提供的钩子

useRef  、useCallback 、useMemo 、

useReducer  、useLayoutEffect 、

useImperativeHandle 、useDebugValue

不同钩子用法

useState

export 
default 

function 
HookDemo(
) {

  
const [count, changeCount] = useState(
0);



  
return (

    

<
div>

      {count}

      
<
button 
onClick=
{() => { changeCount(Math.ceil(Math.random() * 1000)); }}>

        改变count

      
</
button>

    
</
div>

  );

}

useEffect

1. 函数式组件中不存在传统类组件生命周期的概念，如果我们需要在一些特定的生命周期或者值变化后做一些操作的话，必须借助   useEffect  的一些特性去实现。
2. useState  产生的 changeState 方法并没有提供类似于   setState  的第二个参数一样的功能，因此如果需要在 State 改变后执行一些方法，必须通过   useEffect  实现。

const [count, changeCount] = useState(
0);




// 将在count变化时打印最新的count数据

useEffect(

() => {

  message.info(
`count发生变动，最新值为
${count}`);

}, [count])

import React, { useState, useEffect } 
from 
'react';


import { message } 
from 
'antd';





function 
Child(
{ visible }) {

  useEffect(

() => {

    message.info(
'我只在页面挂载时打印');

    
return 

() => {

      message.info(
'我只在页面卸载时打印');

    };

  }, []);



  
return visible ? 
'true' : 
'false';

}




export 
default 

function 
HookDemo(
) {

  
const [visible, changeVisible] = useState(
true);





  
return (

    

<
div>

      {

        visible && 
<
Child 
visible=
{visible} />

      }

      
<
button 
onClick=
{() => { changeVisible(!visible); }}>

        改变visible

      
</
button>

    
</
div>

  );

}

useEffect(

() => {

  
// ...副作用逻辑

}) 
// 注意上面说的关联状态为空不是说不传递第二个参数，而是第二个参数应该为一个空数组

在类组件中，如果在   componentDidMount  中多次调用   setState  设置一个值（ 当然不推荐这样做），并在成功的回调中打印该值，那么最后的结果很可能会打印很多个相同的最后一次设置的值。是因为类的  setState  是一个类异步的结果，他们会将所有变动的内容进行收集然后在合适的时间去统一赋值。

而在   useEffect  中，所有的变量的值都会保留在该副作用执行的时刻，类似于 for 循环中的 let 或者 闭包，所有的变量都维持在副作用执行时的状态，也有人称这个为 Capture Value。

useCallback

const [count1, changeCount1] = useState(
0);


const [count2, changeCount2] = useState(
10);




const calculateCount = useCallback(

() => {

  
if (count1 && count2) {

    
return count1 * count2;

  }

  
return count1 + count2;

}, [count1, count2])



useEffect(

() => {

    
const result = calculateCount(count, count2);

    message.info(
`执行副作用，最新值为
${result}`);

}, [calculateCount])

useRef

const [count, changeCount] = useState(
0);


const [count1, changeCount1] = useState(
0);


// 创建初始值为空对象的prestate


const preState = useRef({});


// 依赖preState进行判断时可以先判断，最后保存最新的state数据

useEffect(

() => {

  
const { ... } = preState.current;

  
if (
// 条件判断) {

    
// 逻辑

  }

  
// 保存最新的state

  preState.current = {

    count,

    count1,

  }

});

export 
default 

function 
HookDemo(
) {

  
const [count] = useState({ 
count: 
1 });



  
const countRef = useRef(count);



  
return (

    

<
div>

      {count.count}

      
<
button 
onClick=
{() => { countRef.current.count = 10; }}>

        改变ref

      
</
button>

    
</
div>

  );

}

useMemo

import React, { useState, useMemo } 
from 
'react';


import { message } 
from 
'antd';




export 
default 

function 
HookDemo(
) {

  
const [count1, changeCount1] = useState(
0);

  
const [count2, changeCount2] = useState(
10);



  
const calculateCount = useMemo(

() => {

    message.info(
'重新生成计算结果');

    
return count1 * 
10;

  }, [count1]);

  
return (

    

<
div>

      {calculateCount}

      
<
button 
onClick=
{() => { changeCount1(count1 + 1); }}>改变count1
</
button>

      
<
button 
onClick=
{() => { changeCount2(count2 + 1); }}>改变count2
</
button>

    
</
div>

  );

}

import React, { useState, useMemo } 
from 
'react';


import { message } 
from 
'antd';





function 
Child(
{ count }) {

  
return 

<
p>当前传递的count为:{count}
</
p>;

}




export 
default 

function 
HookDemo(
) {

  
const [count1, changeCount1] = useState(
0);

  
const [count2, changeCount2] = useState(
10);



  
const child = useMemo(

() => {

    message.info(
'重新生成Child组件');

    
return 

<
Child 
count=
{count1} />;

  }, [count1]);

  return (

    
<
div>

      {child}

      
<
button 
onClick=
{() => { changeCount1(count1 + 1); }}>改变count1
</
button>

      
<
button 
onClick=
{() => { changeCount2(count2 + 1); }}>改变count2
</
button>

    
</
div>

  );

}

其他钩子

编写自己的钩子

最基本的钩子

import React, { useState } 
from 
'react';




// 编写我们自己的hook，名字以use开头



function 
useCounter(
initialValue) {

  
// 接受初始化的值生成state

  
const [count, changeCount] = useState(initialValue);

  
// 声明减少的方法

  
const decrease = 

() => {

    changeCount(count - 
1);

  }

  
// 声明增加的方法

  
const increase = 

() => {

    changeCount(count + 
1);

  }

  
// 声明重置计数器方法

  
const resetCounter = 

() => {

    changeCount(
0);

  }

  
// 将count数字与方法返回回去

  
return [count, { decrease, increase, resetCounter }]

}




export 
default 

function 
myHooksView(
) {

  
// 在函数组件中使用我们自己编写的hook生成一个计数器，并拿到所有操作方法的对象

  
const [count, controlCount] = useCounter(
10);

  
return (

      

<
div>

        当前数量：{count}

            
<
button 
onClick=
{controlCount.decrease}>减少
</
button>

            
<
button 
onClick=
{controlCount.increase}>增加
</
button>

            
<
button 
onClick=
{controlCount.resetCounter}>重置
</
button>

    
</
div>

  )

}

返回 DOM 的钩子

import React, { useState } 
from 
'react';


import { Modal } 
from 
'antd';





function 
useModal(
) {

  
const [visible, changeVisible] = useState(
false);



  
const toggleModalVisible = 

() => {

    changeVisible(!visible);

  };



  
return [(

    

<
Modal

      
visible=
{visible}

      
onOk=
{toggleModalVisible}

      
onCancel=
{toggleModalVisible}

    >

      弹窗内容

      
</
Modal>

  ), toggleModalVisible];

}




export 
default 

function 
HookDemo(
) {

  
const [modal, toggleModal] = useModal();

  
return (

    

<
div>

      {modal}

      
<
button 
onClick=
{toggleModal}>打开弹窗
</
button>

    
</
div>

  );

}