react中常用的几个hook

October 11,2021

HOOK

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

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

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

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

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

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

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

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

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

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

Comments