组件导航钩子_ReactJS：带钩子的类组件和功能组件概述

组件导航钩子

您好读者，CoolMonkTechie衷心欢迎您的这篇文章。

在本文中，我们将学习类组件和功能组件之间的差异，以及哪种钩子最适合使用。 关于学习的著名名言是：

“ 学习的美丽之处在于没有人能把它从你手中夺走。”

因此，让我们开始吧。

在React中定义组件的最简单方法是编写一个返回React元素JavaScript函数：

function Welcome ( props )  {
  return < h1 > Hello, {props.name} </ h1 > ;
}

Welcome组件接受props，props是一个包含数据的对象，并返回React元素。 然后，我们可以将该组件导入并渲染到另一个组件中。

类组件使用一种称为“ 封装”的编程方法，该方法基本上意味着与类组件相关的所有内容都将存在于其中。 生命周期方法（构造函数，componentDidMount（），渲染等）使组件具有可预测的结构。

封装是OOP（O bject-öriented P在AGC）的基本原理之一。 它指的是在对数据进行操作的方法中捆绑数据，并用于隐藏类内结构化数据对象的值或状态-防止未经授权的方直接访问它们。

使用Hooks，组件的组成将从生命周期Hooks的组合更改为最终带有某些渲染的功能。

功能组件

下面的示例显示了如何在功能组件中使用自定义的Hook（不显示主体是什么）。 但是，它可以做什么或可以做什么不受限制。 它可能是实例化状态变量，使用上下文，将组件订阅各种副作用-如果您使用的是自定义钩子，则可能是上述所有操作！

function  {
  useHook{...};
  useHook{...};
  useHook{...};
  return (
    ...
  );
}

类组件

一个类组件需要您从React.Component扩展并创建一个渲染函数，该函数返回一个React元素。 这需要更多代码，但也会给您带来一些好处。

class  {
  constructor (props) {...}
  componentDidMount() {...}
  componentWillUnmount() {...}
  render() {...}
}

那么，哪个最适合Hooks？

答案是 ：

通过在React中使用功能组件可以获得一些好处：

分离容器和表示性组件将变得更加容易，因为如果您无法访问组件中的setState（），则需要更多考虑组件的状态。功能性组件是简单JavaScript函数，因此更易于阅读和测试没有状态或生命周期的钩子。您最终得到的代码更少。 React团队提到，未来的React版本中功能组件的性能可能会提高。

这是使用React Hooks时的第一个最佳实践。

这就是本文的全部内容。

结论

在本文中，我们了解了Hooks中Class组件和功能组件的区别和好处，其中最适合Hooks。

谢谢阅读 ！ 希望您喜欢并了解React类组件和功能组件之间的差异，以及哪一种最适合Hooks。 阅读是一回事，但掌握它的唯一方法就是自己做。

如果您有任何意见，疑问或认为我错过了什么，请随时在评论框中将其保留在下面。

再次感谢您的阅读。 祝您阅读愉快！😊😊😊

翻译自: https://hackernoon.com/reactjs-an-overview-of-class-components-and-functional-components-with-hooks-c53b3zgx

组件导航钩子