欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

React Hook

程序员文章站 2022-06-21 12:27:26
...

Hook 是 React 16.8 增加的新特性,它可以使你在不使用 class 的时候使用 state 和 react 的其他特性。

State Hook

例:用 State Hook 实现一个计数器。

import React,{useState} from 'react';

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

	return <>
		<p>当前计数:{count}</p>
		<button onClick={() => setCount(count + 1)}>点击加一</button>
	</>
}
ReactDOM.render(<Counter />,document.getElementById('root'))
  1. useState 唯一的参数就是传进去的初始参数 ‘0’,它不是一个对象。如果需要的话,可以把它设置为对象,且这个参数只有第一次渲染时会用到。
  2. 解构出来的第一个参数是初始化 state 返回的 getter。第二个参数是修改初始化参数的回调函数。
  3. Hook 不能在 class 组件中使用。
  4. 更新 state,总是替换它,而不是像 class 中的状态合并它。

Effect Hook

Effect Hook 类似于 class 组件中的componentDidMount、componentDidUpdate 和 componentWillUnmount,它们的用途相似,所以表现就为:React 完成 DOM 的更改之后,Effect 会运行,因为它在组件内部声明,同时它也就可以访问到组件的 props 和 state。

import React,{useState,useEffect} from 'react';

function Counter(){
	const [count,setCount] = useState(0);
	useEffect(()=>{document.title = `点击了${count}次`})
	return <>
		<p>当前计数:{count}</p>
		<button onClick={() => setCount(count + 1)}>点击加一</button>
	</>
}
ReactDOM.render(<Counter />,document.getElementById('root'))
  • 上面这个例子,当点击了 button ,更新完 DOM 之后,标题会因为 Effect 函数更新。
  • 在 Effect 里面返回一个清除 Effect 的,这样就可以取消 Effect 对这个组件的订阅。

Hook 使用规则

  1. 只能在函数最外层调用 Hook,不要在循环、条件判断或者子函数中调用。
  2. 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。
相关标签: React