浅谈react hooks

React hooks

作用:扩展了原有函数组件的功能,让函数组件拥有了像类组件一样的相似特征.

此处补充:函数组件和类组件的区别:

1.函数组件看似只是一个返回值是DOM结构的函数，其实它的背后是无状态组件（Stateless Components）的思想。函数组件中，你无法使用State，也无法使用组件的生命周期方法，这就决定了函数组件都是展示性组件（Presentational Components），接收Props，渲染DOM，而不关注其他逻辑。
2.函数组件中没有this。所以你再也不需要考虑this带来的烦恼。而在类组件中，要记得绑定this。
3.函数组件更容易理解。当你看到一个函数组件时，你就知道它的功能只是接收属性，渲染页面，它不执行与UI无关的逻辑处理，它只是一个纯函数。而不用在意它返回的DOM结构有多复杂。
4.性能。目前React还是会把函数组件在内部转换成类组件，所以使用函数组件和使用类组件在性能上并无大的差异。但是,未来将会优化函数组件的性能，因为函数组件不需要考虑组件状态和组件生命周期方法中的各种比较校验，所以有很大的性能提升空间。
5.函数组件迫使你思考最佳实践。这是最重要的一点。组件的主要职责是UI渲染，理想情况下，所有的组件都是展示性组件，每个页面都是由这些展示性组件组合而成。如果一个组件是函数组件，那么它当然满足这个要求。所以牢记函数组件的概念，可以让你在写组件时，先思考这个组件应不应该是展示性组件。更多的展示性组件意味着更多的组件有更简洁的结构，更多的组件能被更好的复用。

但是在hooks中不能使用类组件中的’自定义state’特性.但是,函数组件内部自定义数据状态功能远远超出类组件.而且,hooks只能运行在函数组件中,不能运行在类组件中,也决定了函数组件的优越性(hooks只能运行在组件的”内部顶层中,也就是不能运行在嵌套的函数中,如if/for等函数体”).

Hook的本意就是”钩子”,因为之前的函数组件不能使用react的生命周期,hooks可以调用生命周期或者某些数据状态,便于我们关联触发调用.

因为需要不同作用的hook(钩子),所以hooks定义为具有不同作用的钩子们.各自有着各自的作用.比如对应某一生命周期做处理.

Hooks函数必须为纯函数,纯函数就是函数内部不能修改可能影响执行结果的任意参数,确保每次执行的代码结果都是一样的.

使用hook的原因:(类比类组件的缺点)
不使用复杂的this,直接使用变量即可.
自定义hook,使数据状态逻辑从组建中抽离出来,这样就可以被多个组件使用,解决了类组件数据状态逻辑不能重用的问题.
通过react内置的useState()函数,将数据独立出来.并且可以进行拆分使用,解决了之前只能是整体的问题.
通过useEffect()函数,将生命周期函数中的componentDidMonut,componentDidUpdate,componentWillUmount通过hook关联成一个函数,解决了事件订阅分散在多个生命周期函数中的问题.
Hook尤其闪亮的特点是,全局共享数据,在类组件中不可实现的一件事.

Hooks是发展的必然趋势,利用hook进行函数组件开发,是明智的选择.