类_钩子 安装键盘钩子_从类转向钩子

类_钩子 安装键盘钩子

When coding in React, do you find yourself often wondering “Should I make this component a class component or functional component?” Then, because you’re not sure you need state, you decide with functional components for its efficiency and you don’t want to deal with class lifecycles, yadda yadda. And then much later, this decision comes back to bite you because you suddenly need state in the component. At last, you start questioning your life choices as you begin switching your code to class syntax — extend Component, this.props, render(), etc.

在React中进行编码时，您会发现自己经常想知道“我应该将该组件作为类组件还是功能组件？” 然后，由于不确定您是否需要状态，您可以决定使用功能组件来提高效率，并且不想处理类生命周期yadda yadda。 然后，很久以后，这个决定又回到了您的视线，因为您突然需要组件中的状态。 最后，当您开始将代码切换为类语法时，您开始质疑您的生活选择— extend Component ， this.props ， render()等。

Well, you’re in luck! Hooks are your answer.

好吧，你很幸运！ 挂钩是您的答案。

React 16.8.0 (released February 2019) introduced Hooks — a way to use state and other React features without writing a class¹. This doesn’t mean you have to go back and switch all of your class components to functional components and add Hooks. However, you can gradually start implementing Hooks as you build onto your existing code.

React 16.8.0(于2019年2月发布)引入了Hooks —一种无需编写类即可使用状态和其他React功能的方法。 这并不意味着您必须返回并将所有类组件切换为功能组件并添加Hooks。 但是，您可以在现有代码的基础上逐步开始实现Hook。

快速笔记— (Quick notes —)

- Hooks do not work in class components
- Only call Hooks from React function components, not regular         JavaScript functions
- Hooks can be called from custom Hooks
- Only call Hooks at the top level. Don't call Hooks inside loops, conditions, or nested functions.

类vs挂钩-状态 (Classes vs Hooks — State)

useState is a Hook that allows you to add state to function components. And you don’t have to worry about binding this!

useState是一个Hook，它允许您向功能组件添加状态。 而且您不必担心绑定this ！

useState accepts the initial state as an argument and it returns the current state value and a function that lets you update it¹. In a class, this looks like state = {}, this.state, and this.setState()².

useState接受初始状态作为参数 ，并返回当前状态值和一个允许您对其进行更新的函数¹。 在类中，这看起来像state = {} ， this.state和this.setState() ²。

In this example, clicking the button will add a plate to your stack of plates at this Sushi Bar. Comparing the two code, essentially this.state.plate=plate, this.setState = setPlate. Note — setPlate does not merge changes with the initial state, but instead it replaces it.

在此示例中，单击按钮会将一个盘子添加到该Sushi Bar的盘子堆中。 比较这两个代码，本质上是this.state.plate = plate ， this.setState = setPlate 。 注意— setPlate不会将更改与初始状态合并，而是将其替换。

In line 20, this syntax allows the return values of useState to be assigned to a variable via destructuring.

在第20行中，此语法允许通过destructuring将useState的返回值分配给变量。

类与钩子—生命周期方法 (Classes vs Hooks — Lifecycle Methods)

If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined³.

如果您熟悉React类的生命周期方法，可以将useEffect Hook视为componentDidMount ， componentDidUpdate和componentWillUnmount组合useEffect 。

Currently, there are no equivalents for getSnapshotBeforeUpdate, componentDidCatch and getDerivedStateFromError, but they will be added soon.

当前，没有等效的getSnapshotBeforeUpdate ， componentDidCatch和getDerivedStateFromError ，但它们将很快添加。

In this example, the Sushi Bar has become an all-you-can-eat-sushi, but with a 10 minute timer.

在此示例中，寿司吧已成为无限量供应的寿司，但具有10分钟的计时器。

In classes, componentDidMount and componentWillUnmount generally mirror each other if you want to avoid bugs especially if you have side effects that require clean-up. With useEffect, if your effect returns a function (which is optional), React will run it when it is time to clean up³. Instead of separating out the logic into different functions, this keeps them close together and easier to keep track of.

在类中，如果要避免错误，尤其是当您有需要清除的副作用时， componentDidMount和componentWillUnmount通常会相互镜像。 使用useEffect ，如果您的效果返回一个函数(可选)，React将在需要清理³时运行它。 不必将逻辑分离为不同的功能，而是将它们保持在一起并且更易于跟踪。

Note — useEffect runs on every re-render.

注意： useEffect在每次重新渲染时运行。

回调和道具 (Callbacks and Props)

Hooks are also customizable and useful for passing information between Hooks. Passing information from parent to child components, utilizing props is the same. For passing information from child to parent, see more on custom hooks.

挂钩也是可自定义的，对于在挂钩之间传递信息很有用。 使用道具将信息从父组件传递到子组件是相同的。 有关将信息从子级传递到父级的信息，请参见有关自定义钩子的更多信息。

Resources

资源资源

• ReactJS documentation

  ReactJS文档

• Rules of Hooks

  钩子规则

• Hook FAQ

  挂钩常见问题

• React Github Change Log

  ReactGithub更改日志

• JavaScript Destructuring Assignment

  JavaScript解构分配

¹ Hooks at a Glance. (n.d.). Retrieved August 13, 2020, from https://reactjs.org/docs/hooks-overview.html

¹一览无余。 (nd)。 于2020年8月13日从https://reactjs.org/docs/hooks-overview.html检索

² Using the State Hook. (n.d.). Retrieved August 13, 2020, from https://reactjs.org/docs/hooks-state.html

²使用状态挂钩。 (nd)。 于2020年8月13日从https://reactjs.org/docs/hooks-state.html检索

³ Using the Effect Hook. (n.d.). Retrieved August 13, 2020, from https://reactjs.org/docs/hooks-effect.html

³使用效果钩。 (nd)。 于2020年8月13日从https://reactjs.org/docs/hooks-effect.html检索

翻译自: https://medium.com/swlh/react-shifting-from-classes-to-hooks-7a1c5e60035a

类_钩子 安装键盘钩子