深入了解React钩子＃1：简介

注意&＃xff1a;这是系列文章中的第一篇&＃xff0c;我们将深入探讨React Hooks&＃xff0c;并尝试了解它们的用法。

React Hooks是React 16.8中的新增功能。 它们使您无需编写类即可使用状态和其他React功能。 这是您编写React方法的根本转变。

挂钩没有任何重大变化&＃xff0c;并且100&＃xff05;向后兼容。 如果您是新手&＃xff0c;请学习此功能或经验丰富的专业人士&＃xff0c;请尝试此操作&＃xff01;

但是什么是挂钩&＃xff1f;

挂钩是让您“挂钩” React状态和生命周期的函数
功能组件的功能。 钩子在课堂上不起作用-
他们让您无需类即可使用React。 您绝对可以在单个树中将类和函数组件与Hooks混合使用。

在2018年React会议上&＃xff0c;Sophie Alpert和Dan Abramov介绍了Hooks&＃xff0c;您可以观看下面的视频介绍&＃xff1a;

React核心团队建议在您编写的新组件中使用Hooks 。 从长远来看&＃xff0c;他们希望Hooks成为人们编写React组件的主要方式。 因此&＃xff0c;请在新项目的功能组件和现有项目的新组件中使用挂钩。

注意&＃xff1a;钩子可以解决更多问题&＃xff0c;但现在我们将集中讨论以下问题-

1. 功能组件可以使用类似于类的基于状态的组件
2. 我们可以避免在componentDidMount&＃xff08;&＃xff09;和componentDidUpdate&＃xff08;&＃xff09;中写几乎相同的东西
3. 通过编写更少&＃xff0c;更简洁的代码来实现相同的功能

使用React Hooks时需要遵循两个规则&＃xff1a;

1. 仅在顶层调用挂钩&＃xff1a;不要在循环&＃xff0c;条件或嵌套函数内部调用挂钩。 相反&＃xff0c;请始终在您的React函数的顶层使用挂钩。 通过遵循此规则&＃xff0c;可以确保每次渲染组件时都以相同的顺序调用Hook。 这就是让React在多个useState和useEffect调用之间正确保留Hook的状态的原因。
2. 仅从React函数调用挂钩&＃xff1a;请勿从常规Javascript函数调用挂钩。 相反&＃xff0c;您可以从React Functions或Custom React Hooks中调用它们

有关规则的更多详细信息&＃xff0c;请检查— https://reactjs.org/docs/hooks-rules.html#explanation

React核心团队为我们提供了一个皮棉规则&＃xff0c;可以帮助我们正确使用钩子&＃xff08;强制执行上述规则&＃xff09;。 您也可以在ESLint配置中添加相同的内容。

通过执行npm install -D eslint-plugin-react-hooks添加ESLint规则&＃xff0c;并将其添加到ESLint配置中&＃xff1a;

在接下来的故事中&＃xff0c;我们将按顺序介绍以下挂钩&＃xff1a;

• useState
• useEffect
• useContext
• useRef
• useReducer
• useMemo
• useCallback
• useLayoutEffect
• useImperativeHandle

From: https://hackernoon.com/react-hooks-63192d1d