与渲染相比，React 钩子答案

【问题标题】：React hooks compared to render与渲染相比，React 钩子
【发布时间】：2019-07-01 07:51:41
【问题描述】：

我很新的反应，当你开始一个新项目时发现样板与最近有点不同。现在它带有这样的东西：

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello world!</h1>
    </div>
  );
}

export default App;

不像以前那样：

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello World</h1>
      </div>
    )
  }
}

export default App;

渲染功能消失了。我发现它与钩子有关。

react 中的类现在消失了吗？渲染函数也是如此吗？我知道您仍然可以使用“旧方式”，但只是为了确保我做对了。跟钩子有关系吧？

与编写组件的render和class方式相比，hook的好处是什么？

我猜这也适用于 react-native ...

【问题讨论】：

React 现在可以正常运行了。课程消失了，一切都变成了功能。没有渲染，只是返回。这会产生更简洁、性能更高的代码。但是，如果你愿意，你可以坚持上课。
@LiJonas 你的评论不公平。说“上课没了”是绝对错误的。他们很长一段时间都不会去任何地方。
@keul 我的意思是进一步的开发将集中在功能组件上。将继续支持类，以便让旧项目使用最新的 react 版本，而无需将代码迁移到 hooks。

标签： reactjs react-hooks

【解决方案1】：

这不是旧方法也不是新方法。这只是两种不同的方式已经存在了一段时间。

如果您构建没有状态的更简单的组件，您可以使用功能组件。这是您在帖子中使用的第一个符号：返回 JSX 表达式的函数。

如果您构建带有自己状态的更复杂的组件，并且将它们实现为类是有意义的，您可以使用类组件。这是您在帖子中使用的第二个符号：具有渲染函数的类，该函数又返回一个 JSX 表达式。

React docs 中对两者都有很好的描述。

【讨论】：

React v16.8 不再建议使用类，而是建议迁移到功能组件。
你有那个来源吗？
reactjs.org/docs/hooks-faq.html 部分：Should I use Hooks, classes, or a mix of both?
@LiJonas 更准确。 16.8 建议为 FC 制作新组件。我之所以在其中提及，是因为 migrate 这个词也可以解释为将现有基础架构转移到功能上的要求，这实际上是明确不鼓励的。
@apokryfos 你是对的，迁移是一个错误的词

【解决方案2】：

来自 React DOCS：

https://reactjs.org/docs/hooks-intro.html

Hooks 是 React 16.8 中的新增功能。它们让您无需编写类即可使用状态和其他 React 功能。

渲染功能没有消失。您的功能组件仍然是“渲染函数”，因为它们会返回应该渲染到屏幕的内容。

之前，为了使用state 并访问组件生命周期等其他功能，您需要将组件编写为一个类。在我看来，有了钩子，这不再是必需的，您将可以访问state 和其他具有更清晰的 API 和语法的功能。您的代码将变得更具可读性。

来自 Hooks 常见问题解答：

https://reactjs.org/docs/hooks-faq.html

我需要重写我的所有类组件吗？

没有。没有从 React 中删除类的计划——我们都需要继续交付产品并且负担不起重写。我们建议在新代码中尝试 Hooks。

我应该使用 Hooks、类还是两者兼而有之？

当您准备好后，我们鼓励您开始在您编写的新组件中尝试 Hooks。确保团队中的每个人都在使用它们并熟悉本文档。我们不建议将您现有的类重写为 Hook，除非您打算重写它们（例如修复错误）。

你不能在类组件中使用 Hooks，但你绝对可以将类和函数组件与 Hooks 混合在一个树中。组件是使用 Hooks 的类还是函数是该组件的实现细节。从长远来看，我们希望 Hooks 成为人们编写 React 组件的主要方式。

Hooks 是否涵盖类的所有用例？

我们的目标是让 Hooks 尽快涵盖类的所有用例。目前还没有不常见的 getSnapshotBeforeUpdate 和 componentDidCatch 生命周期的 Hook 等效项，但我们计划很快添加它们。

Hooks 还处于早期阶段，目前一些第三方库可能与 Hooks 不兼容。

【讨论】：