react hooks自定义组件居然能这样做

前言

　　这里写一下如何封装可复用组件。首先技术栈 react hooks + props-type + jsx封装纯函数组件。类组件和typeScript在这不做讨论，大家别白跑一趟。

接下来会说一下封装可复用组件的思路，比如一个新手应该怎么去封装，都需要有哪些东西。

　　然后说一些复杂组件需要的功能，比如闭合标签内部dom怎么处理，其实就是插槽功能，比如数据监听，内部做一些业务逻辑。

　　想看原码的点这里，这是一个GitHub上完整的 react hooks 项目，源码：
https://github.com/Aaron-China/react-cli17/tree/master/src/components/c-menu

目录

1、思路 及 封装的误区

2、 props 的类型检测、默认值

3、父子组件与他的数据互通

4、实现类似于vue插槽一样的功能 （children属性）

5、useState、useEffect等hooks讲解

6、总结

一、思路

　　无论是js还是C++等等，都要求 模块内高内聚、模块间低耦合。简单点说就是你改了一个模块，另一个模块稍作修改就行，不至于改动很大。根据这个编程思想，一个可复用的组件的对外交互，就是决定他耦合度的关键。把组件比作香肠机，输入猪肉，输出香肠。输入就是props，输出就是界面效果 以及 给外部反馈的回调函数。关于输入props，我们对他有要求，就是类型检查和默认值。比如输入的得是猪肉不能是石头，默认做小香肠&