react钩子
When coding in React, do you find yourself often wondering “Should I make this component a class component or functional component?” And then, because you’re not sure you need state, you go with a functional component for its efficiency and classes have 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 the 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 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
的返回值分配给变量。
类vs钩子—生命周期方法 (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
,但它们将很快添加。
// Class
class SushiBar extends React.Component {
state = {
plate: 0,
timeLeft: ''
}
componentDidMount() {
const timer = setTimeout(
() => {setTimeLeft(timeLeft - 1), alert('Time's up)},
600000)
}
componentWillUnmount() {
clearTimeout(timer)
}
...
// Hooks
import React, { useEffect } from 'react'
SushiBar = () => {
const [plate, setPlate] = useState(0)
const [timeLeft, setTimeLeft] = useState('')
useEffect(() => {
const timer = setTimeout(() => {
setTimeLeft(timeLeft - 1), alert('Time's up)},
600000
);
return () => clearTimeout(timer);
}, [timeLeft]);
}
...
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
资源资源
¹ 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/@carly_l/react-shifting-from-classes-to-hooks-7a1c5e60035a
react钩子