React为什么要搞一个Hooks
https://github.com/happylindz/blog/issues/19
想要复用一个有状态的组件太麻烦了!
我们都知道React的核心思想就是,将一个页面拆分成一堆独立的,可以复用的组件,并且用自上而下的单向数据流的形式将这些组件串联起来。但如果在大型的项目中使用React,那么我们就会发现项目中实际上很多React组件冗长且难以复用。尤其是那些写成class的组件,他们本身本来就包含了状态(state),所以复用这类组件就变得很麻烦。
那之前,官方解决这个问题的办法是使用渲染属性(Render Props) 和高阶组件(Highter-Order Components)
渲染属性:渲染属性指的是使用一个值为函数的prop来传递需要动态渲染的nodes或组件。如下面的代码可以看到我们的DataProvider组件包含了所有跟状态相关的代码,而Cat组件则可以是一个单纯的展示型组件,这样一来DataProvider就可以单独复用了。
高阶组件:说白了就是一个函数接受一个组件作为参数,经过一系列加工后,最后返回一个新的组件。看下面的代码示例,withUser函数就是一个高阶组件,它返回了一个新的组件,这个组件具有了它提供的获取用户信息的功能。