[译] React v16.8: 含有Hooks的版本

栏目: IOS · Android · 发布时间: 5年前

内容简介:原文出处:February 06, 2019 by Dan Abramov伴随 React 16.8,

原文出处: React v16.8: The One With Hooks

February 06, 2019 by Dan Abramov

伴随 React 16.8, React Hooks 可以在稳定版本中使用!

什么是 Hooks?

Hooks 可以让我们不用写一个 class 就能使用 state 和其他的 React 特性。我们也可以 构建我们自己的 Hooks 来在组件之间共享可重复使用的有状态逻辑。

如果您之前从未听说 Hooks,您可能对下列这些资源感兴趣:

您现在没必要一定要学习 Hooks 。Hooks 并没有突破性的改变,而且我们也没有打算 React 中移除 class。这篇 Hooks FAQ 描述了逐步采用的策略。

_

无需大规模重写

我们不推荐重写您已经存在的应用,以便一夜之间就使用上 Hooks。相反,我们更建议您尝试在一些新的组件中使用 Hooks,并且请让我们了解到您的使用感受。使用 Hooks 的代码会与现存使用 class 的代码并肩在一起工作。

现在可以使用 Hooks 了吗?

当然!从 16.8.0 开始,React 包含了 React Hooks 的稳定实现来用于:

  • React DOM
  • React DOM Server
  • React Test Renderer
  • React Shallow Renderer

请注意, 要启用 Hooks,所有的 React 包均需要升级到 16.8.0 或者更高版本。 如果忘记升级,不能使用 Hooks,比如 React DOM。

React Native 将会在 0.59 发布版本中得到支持。

_

工具支持

React DevTools 目前支持 React Hooks。在最新的 Flow 和 TypeScript 对 React 的定义中也同样支持。我们强烈建议使用一条 名为 eslint-plugin-react-hooks 的新检查规则 ,来强制实现 Hooks 的最佳实践。很快它也会默认包含进 Create React App 中。

_

下一步呢?

我们已经在最近发布的 React Roadmap 中,描述了我们接下来几个月的计划。

请注意 React Hooks 还没有涵盖 class 的所有用例,但是 差不多了快完成了

目前,只有 getSnapshotBeforeUpdate()componentDidCatch() 这俩方法没有相对应的 Hooks API,而且它们的生命周期相对来说比较特殊少见。如果您需要,您应该可以在您写的大多数新代码中使用 Hooks。

尽管 Hooks 还处于初步阶段,React 社区已经使用 Hooks 为动画、表单、订阅、与其他库集成等方面,创作了很多有意思的 示例指南手册 。Hooks 使得代码复用更加简单,帮助我们用更加简洁的方式写出组件,以提供更好的用户体验,这让我们感到很兴奋。我们等不及要看到您下一次的创作!

_

测试 Hooks

我们在发布版中添加了一个名为 ReactTestUtils.act() 的新 API。它可以确保测试中的行为与浏览器中的行为更紧密地匹配。我们建议将任何渲染和触发组件更新的代码包装进 act() 调用。测试库也可以用它包装它们的API(例如, react-testing-libraryrenderfireEvent 实用 工具 就是这样做的)。

例如, 此页面 的计数器可以像这样进行测试:

import React from 'react';
import ReactDOM from 'react-dom';
import { act } from 'react-dom/test-utils';
import Counter from './Counter';

let container;

beforeEach(() => {
  container = document.createElement('div');
  document.body.appendChild(container);
});

afterEach(() => {
  document.body.removeChild(container);
  container = null;
});

it('can render and update a counter', () => {
  // Test first render and effect
  act(() => {
    ReactDOM.render(<Counter />, container);
  });
  const button = container.querySelector('button');
  const label = container.querySelector('p');
  expect(label.textContent).toBe('You clicked 0 times');
  expect(document.title).toBe('You clicked 0 times');

  // Test second render and effect
  act(() => {
    button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
  });
  expect(label.textContent).toBe('You clicked 1 times');
  expect(document.title).toBe('You clicked 1 times');
});

如果打算测试自定义的 Hooks,可以通过在测试中创建一个组件并使用它的 Hook 来实现,然后您就可以测试您写的 Hooks 了。

为了减少样板,建议使用 react-testing-library 来进行测试,该库是为鼓励编写测试用例而设计的。

_

感谢

感谢所有在 Hooks RFC 中进行评论来分享自己的反馈信息的同学。我们已经阅读了你们的所有评论意见,并在其基础上为最终的 API 做了些许调整。

_

安装

React

React v16.8.0 在 npm 上已可以使用。

使用 Yarn 来安装 React 16,运行命令:

yarn add react@^16.8.0 react-dom@^16.8.0

使用 npm 来安装 React 16,运行命令:

npm install --save react@^16.8.0 react-dom@^16.8.0

同时也通过 CDN 提供React 的 UMD 构建版本:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

有关详细安装说明,请参阅 文档

用于 React Hooks 的 ESLint 插件

注意:

如上所述,强烈建议您使用 eslint-plugin-react-hooks 规则。

如果正在使用 Create React App,而不是手动配置 ESLint,建议等待下一个版本的 react-scripts ,即将发布并且会包含这条规则。

假定您已经安装过了 ESLint,运行命令:

# npm
npm install eslint-plugin-react-hooks@next --save-dev

# yarn
yarn add eslint-plugin-react-hooks@next --dev

然后,添加下面的内容到 ESLint 配置中:

{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error"
  }
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

写给大家看的Web设计书

写给大家看的Web设计书

Robin Williams、John Tollett / 苏金国、刘亮 / 人民邮电出版社 / 201005 / 69.00元

在这个网络时代,Web设计几乎已经成为每个人生活的必备技能。如果你想自力更生创建一个网站,或者认为自己的网站在设计上还不尽如人意,希望它看上去更具创意和专业性,那么本书正是为你准备的! 作者Robin和John先采用通俗易懂的方式将有关基础知识娓娓道来,比如Internet、搜索信息、构建简单网页等,然后为我们奉上了精妙的技巧、技术和设计示例来启发大家的设计灵感,比如Web基本设计原则、实现......一起来看看 《写给大家看的Web设计书》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

随机密码生成器
随机密码生成器

多种字符组合密码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码