看完这篇，你也能把 React Hooks 玩出花
https://juejin.im/post/5d754dbde51d4561cd2466bf
这篇文章中有些案例还是不错，在自定义hook这里写得很好
useMemo 返回值可为数字，可为组件;
useCallback 用着对useEffect中相同逻辑的封装，配合Effect使用；
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 (
{calculateCount}
);
}
作者：政采云前端团队
链接：https://juejin.im/post/5d754dbde51d4561cd2466bf
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。返回的为组件
import React, { useState, useMemo } from 'react';
import { message } from 'antd';
function Child({ count }) {
return 当前传递的count为:{count}
;
}
export default function HookDemo() {
const [count1, changeCount1] = useState(0);
const [count2, changeCount2] = useState(10);
const child = useMemo(() => {
message.info('重新生成Child组件');
return useCallback的这种用法也算新奇，其问如下：
生成 Callback 的钩子。用于对不同 useEffect 中存在的相同逻辑的封装，减少代码冗余，配合 useEffect 使用。
该钩子先看例子会比较好理解一下：
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])
作者：政采云前端团队
链接：https://juejin.im/post/5d754dbde51d4561cd2466bf
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
钩子/最终总结
钩子总结
| 钩子 |
用法 |
作用 |
|---|---|---|
| useState |
|
用于生成状态以及改变状态的方法 |
| useEffect |
|
用于生成与状态绑定的副作用 |
| useCallback |
|
用于生成与状态绑定的回调函数 |
| useMemo |
|
用于生成与状态绑定的组件/计算结果 |
| useRef |
|
用于 获取节点实例 / 数据保存 |
从上面的表格中我们可以看出，在官方提供的 Hook 中，除了基本的 useState 与 useRef 外，其他钩子都存在第二个参数，第一个方法的执行与第二个参数相互关联。于是我们可以得出一个结论，在使用了 Hook 的函数式组件中，我们在使用副作用/引用子组件时都需要时刻注意对代码进行性能上的优化。
最终总结
我在前面的总结里是这么评价 React Hooks 的：
Hooks 组件的目标并不是取代 class component 组件，而是增加函数式组件的使用率，明确通用工具函数与业务工具函数的边界，鼓励开发者将业务通用的逻辑封装成 React Hooks 而不是工具函数。
作者：政采云前端团队
链接：https://juejin.im/post/5d754dbde51d4561cd2466bf
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
编写自己的钩子
其实从上面讲解的内容来看，钩子并不是什么高深莫测的东西，它只是对我们常用逻辑的一些封装，接下来就会通过具体的代码来教大家写一个自己的钩子。
最基本的钩子
最基本的钩子也就是返回包含了更多逻辑的 State 以及改变 State 方法的钩子。拿计数器来说，其最基本的就是返回当前的数字以及减少/增加/重置等功能，明确完功能后可以开始动手做了。
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 (
当前数量：{count}
)
}
复制代码在上面的例子中，我们将在 useCounter 这个钩子中创建了一个关联了 initialValue 的状态，并创建减少/增加/重置的方法，最终将其通过 return 返回出去。这样在其他组件需要用到该功能的地方，通过调用该方法拿到其返回值，即可实现对 useCounter 组件封装逻辑的复用。
演示效果如图：
返回 DOM 的钩子
返回 DOM 其实和最基本的 Hook 逻辑是相同的，只是在返回的数据内容上有一些差异，具体还是看代码，以一个 Modal 框为例。
import React, { useState } from 'react';
import { Modal } from 'antd';
function useModal() {
const [visible, changeVisible] = useState(false);
const toggleModalVisible = () => {
changeVisible(!visible);
};
return [(
弹窗内容
), toggleModalVisible];
}
export default function HookDemo() {
const [modal, toggleModal] = useModal();
return (
{modal}
);
}
复制代码这样我们就实现了一个返回了弹窗内容以及改变弹窗显示状态的 Hook，其实可以封装的内容还有很多很多，可以通过配置项的设置实现更丰富的封装。
演示效果如图：
钩子/最终总结
作者：政采云前端团队
链接：https://juejin.im/post/5d754dbde51d4561cd2466bf
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。