最新消息:看到那些跳动的图片、文字了吗?点击点击 O(∩_∩)O~~

理解 React Hooks

深夜食堂 onlyling 2241浏览

前言

一句话总结 React Hooks 就是在 react 函数组件中,也可以使用类组件(classes components)的 state 和 组件生命周期,而不需要在 mixin、 函数组件、HOC组件和 render props 之间来回切换,使得函数组件的功能更加实在,更加方便我们在业务中实现业务逻辑代码的分离和组件的复用。

Hooks 在解决什么问题 Hooks 的 api 介绍 和如何使用 hooks Hooks 是怎么实现的

Hooks 在解决什么问题

React 一直在解决一个问题,如何实现分离业务逻辑代码,实现组件内部相关业务逻辑的复用。

一般情况下,我们都是通过组件和自上而下传递的数据流将我们页面上的大型UI组织成为独立的小型UI,实现组件的重用。但是我们经常遇到很难侵入一个复杂的组件中实现重用,因为组件的逻辑是有状态的,无法提取到函数组件当中。这在处理动画和表单的时候,尤其常见,当我们在组件中连接外部的数据源,然后希望在组件中执行更多其他的操作的时候,我们就会把组件搞得特别糟糕:

  • 难以重用和共享组件中的与状态相关的逻辑,造成产生很多巨大的组件。
  • 逻辑复杂的组件难以开发与维护,当我们的组件需要处理多个互不相关的 localstate 时,每个生命周期函数中可能会包含着各种互不相关的逻辑在里面。
  • 复杂的模式,如渲染道具和高阶组件。
  • 由于业务变动,函数组件不得不改为类组件。

由于业务变动,函数组件不得不改为类组件。

从 React Hooks 中体验出来的是 React 的哲学在组件内部的实现,以前我们只在组件和组件直接体现 React 的哲学,就是清晰明确的数据流和组成形式。既可以复用组件内的逻辑,也不会出现 HOC 带来的层层嵌套,更加不会出现 Mixin 的弊端。

理解 React Hooks 点击查看原文阅读Hooks 的 api 介绍 和如何使用 hooks

Hooks 还处于早期阶段,但是给我们复用组件的逻辑提供了一个很好的思路,大家可以在 react-16.7.0-alpha.0 中体验。

转载请注明:OnlyLing - Web 前端开发者 » 理解 React Hooks