组件导航钩子
您好读者,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。 阅读是一回事,但掌握它的唯一方法就是自己做。
如果您有任何意见,疑问或认为我错过了什么,请随时在评论框中将其保留在下面。
再次感谢您的阅读。 祝您阅读愉快!😊😊😊
组件导航钩子