翻译练习react-hooks -1 (16.8.4)

2019-03-07 本文已影响0人土豪码农

文章地址版本:16.8.4

hooks介绍

hooks是react16.8新增的一个功能,它能让你在非class组件中使用state和其他react的特性

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

这是我们将学习关于"hook"的第一个新功能useState,如果你还没有体会到厉害之处,不用担心,这个例子仅仅是一个小试牛刀

你可以直接点击下一页学习hook,在这一页,我们将继续解释为什么我们要给react添加hooks和它能帮助我们怎样编写一些牛逼的程序

注意:
react 16.8.0是第一个支持Hooks的版本,当你升级时,不要忘记去升级所有包,包括React Dom.React Native 将在下一个发布的稳定版本支持Hooks

视频介绍

在react 2018年大会,Sophie Alpert 和 Dan Abramov介绍了Hooks,通过Ryan Florence的演讲学习如何去使用它们重构一个程序,看下面的视频

没有破坏性的改变 (不知道怎么翻译准确..)

在我们继续之前,需要提醒几点:

完全可选择的,你可以尝试使用hooks在一些组件里面不需要重写任何已存在的代码.并且你不想学习hooks,你现在也可以不必去学习或者使用它,
100%向后兼容,Hooks不包含任何破坏性的改变
开箱即用,hooks 在已发布的16.8.0版本已经可以使用

我们没有计划要删除react中的classes,你可以在下面阅读更多关于Hooks循序渐进使用策略

Hooks 不会替换你已知的react概念,相反,Hooks会提供一些你已知的props,state,context,refs和lifecycle等概念一些跟直接的API.不久之后,Hooks也会提供一些新的更强大的方式去结合它们

如果你仅仅是想去学习Hooks,可以直接跳转到下一页你也可以继续阅读此页面去了解更多关于为何要新增Hooks的原因,和我们该怎么在不重写程序代码的前提下去使用它们.

动机

Hooks解决了我们在5年来编辑和维护的数以万计的组件中遇到的一系列似乎毫无相关的问题(这句话爆炸难理解,借助了有道翻译..),不管你是在学习react还是经常使用又或者使用一些其他不同的类似组件模式的库,都可能会意识到一些这些问题.

很难去复用组件之间状态逻辑

react没有提供一种方式去复用"attach"到组件的行为(例如,链接到一个store),如果你利用react工作过一段时间,你可能会很熟悉的去用类似"render props"和"higher-order components"的模式去解决那些问题.但是这些模式在使用的时候必须重构你的组件,这样会非常笨拙麻烦.如果你在react的开发工具中观察典型的react应用,你会发现,我们的组件被许多高级组件,probiders,consumers,render props,和其他抽象的东西包裹着,当我们利用开发工具筛选他们,暴露出一个深层次的问题.react需要一个更好的原始办法去共享状态逻辑

利用Hooks,你能够从一个组件抽取状态逻辑去进行独立测试和复用,Hooks 允许你在不重写组件的前提下去复用状态逻辑.这样能在组件中非常容易的分享hooks甚至发到社区里面

(这一段感觉不知道在讲啥....翻译的狗屎一样)

我们将在构建你自己的hooks里面讨论这个问题

复杂的组件变得难以明白

我们总是需要维护一些组件,那些组件一开始非常简单,但随着发展状态逻辑会变成混乱不可管理的和产生一些副作用.每个生命周期方法通常包含一系列不相关的逻辑,例如,组件可能执行一些数据请求在componentDidMount 和componentDidUpdate中,然而,在同一个componentDidMount方法里可能也包含一些不相关的逻辑例如事件监听,然后在componentWillUnmount要会被清除掉.相关的代码变得被分开一块块,但是完全不相关的代码缺结合再一个方法里面,这样容易出现bugs和矛盾

在很多时候,很难去把这些组件分成小的模块,因为状态逻辑到处都是,这也导致难以测试那些组件.这是很多人宁愿去找一些分离状态管理的库和react结合一起使用的其中一个理由.然而,这样通常会引入很多抽象的问题,你必须在不同的文件之间来回,这样也导致组件复用变得更加困难

为了解决这些问题,Hooks 可以让你把一个组件相关的部分分裂成一个个更小的函数(例如设置一些订阅或者数据获取).而不是基于生命周期强行分割.你也能选择一个reducer来管理组件的本地状态,使其更加可预测的

我们将在使用 Effect Hook.继续讨论这部分

Classes 使人和计算机都混乱了

除了使代码复用和代码管理变得更加困难外,我们还发现classes是学习React的一大障碍,你不得不明白它在js里面是如何工作的,它和其他很多语言的工作方式很不一样,你不得不去记得绑定事件控制.没有稳定的syntax proposals,代码会非常的冗长.用户能够完美的理解props,state,和自上而下的数据流,但依旧难以理解classes.
React中功能和类组件的区别以及何时使用每种组件都会导致有经验的React开发人员之间的分歧。

不仅如此,react已经发布超过5年了,我们希望它在未来5年保持稳定,像Svelte, Angular, Glimmer, 其他框架中展示的那样,提前编译组件在未来有巨大的潜力.尤其是它不局限于模板.最近,我们最近我们在测试Prepack来进行component folding,我们已经看到一些初步的成果.然而,我们发现class组件可能会导致我们一些优化无效.classes也导致今天的工具产生很多issues.例如,classes不能非常有效的最小化,并且导致了一些没有必要的重新加载.我们想去提出一些api便于优化.

为了解决这些问题,Hooks 让你在不用class的前提下使用更多的react特性.从概念上来讲,react组件是接近于函数的.Hooks拥抱函数,但是没有修改React的基本概念.Hooks在不需要您学习复杂的函数式编程就能避开这些问题。

例如
您可以从Hooks at a Glance开始，快速地学习Hooks。

逐渐使用策略

概要:我们没有计划要从react删除class

我们知道React开发者都忙着专心产品迭代。可能没有时间去研究我们发布的每一个新的API。Hooks还非常新颖，或许你可以等有更多的例子和指导出来之后再考虑学习和使用它们

我们也理解给react添加新的底层API的门槛非常的高。对于感到好奇的读者，我们准备了一份 detailed RFC
其中包含更多我们设计Hook的细节和动机，我们设计Hooks时的独特视角。

最重要的是，Hooks与现有的代码可以同时工作，所以你完全可以逐步采用它们。您没有必要着急迁移到Hooks。我们建议避免任何“大范围重构”，尤其是对已有的、复杂的class组件。“Thinking in Hooks”需要您进行一些思想上的切换。在我们的经验中，最佳实践是先在新的、非关键性的代码中试用Hooks，并且保证团队里的所有人都喜欢它们。在你试用过Hooks之后，请一定要来 send us feedback
给我们提供建议或是意见.

我们打算用钩子覆盖类的所有现有用例，但是我们将保持对class组件的支持在可预见的未来里在 Facebook,我们又数以万计的组件用class编写,所以我们绝对没有计划要重写它们.我们将在新的代码使用Hooks和class一起运行