react中常用的几个hook

October 11,2021

HOOK

在不编写 class 的情况下使用 state 以及其他的 React 特性时需要使用hook。Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React。

useState()

这个用法很简单,用来定义state

const [count, setCount] = useState(0);

定义一个叫count的变量,默认值是0,通过setCount来修改它值

useState()中传入count的默认值。

useEffect()

它跟 class 组件中的 componentDidMountcomponentDidUpdatecomponentWillUnmount 具有相同的用途,只不过被合并成了一个 API。他告诉React在完成对DOM的更改后运行‘副作用’函数。

一般的副作用有数据获取,设置订阅以及手动更改 React 组件中的 DOM 。

在初次渲染、更新、组件销毁前都会调用副作用函数。副作用函数可以通过返回一个函数来指定如何清除‘副作用’。可以多次调用。

如果某些特定值在两次重渲染之间没有发生变化,你可以通知 React 跳过对 effect 的调用,只要传递数组作为 useEffect 的第二个可选参数即可:

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新

上一篇 下一篇
Comments
Write a Comment