Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性
1.useState
用来声明state变量,类似于class里的this.state,使用方法如下
export default function Example() {
// useState() 方法里面唯一的参数就是初始 state,可以是数字或字符串或对象
// 这一步设置了count的初始值为0
// setCount为修改count这个状态的方法
// 调用一次setCount,React会重新渲染 Example 组件
const [count, setCount] = useState(0)
return (
<div>
you count: {count}
{/* 每次点击按钮调用setCount,会让count + 1 */}
<button onClick={() => setCount(count + 1)}>Add</button>
</div>
)
}
自定义useState
某些时候我们需要自定义 Hook,这可以将组件逻辑提取到可重用的函数中
// 自定义的Hook需要以大写字母开头
// 这里的Hook只控制count + 1,因此可以复用
// 我们只需多次使用,就如下面的count1和count2,他们是互相独立的
function UseState(initvalValue) {
const [count, setCount] = useState(initvalValue)
return [
count,
() => {
setCount(count + 1)
}
]
}
export default function Example() {
const [count1, addCount1] = UseState(0)
const [count2, addCount2] = UseState(0)
return (
<div>
you count1: {count1}
{/* 每次点击按钮调用setCount,会让count + 1 */}
<button onClick={addCount1}>Add1</button>
you count2: {count2}
{/* 每次点击按钮调用setCount,会让count + 1 */}
<button onClick={addCount2}>Add2</button>
</div>
)
}
2.useEffect
Effect Hook 可以让你在函数组件中执行副作用操作,类似于componentDidMount 和 componentDidUpdate
export default () => {
const [count, setCount] = useState(0);
// 在渲染后将执行该操作,并且在执行DOM更新之后也会调用它
// effect可以返回一个清除函数,如此可以清除上一步的操作
// 可以接受两个参数,第一个就是操作本身,第二个是更新的依赖
// 可以选择不传,不传将依赖所有state变化
// 如果传入空,或者传一个确定的数如[1],那么该函数只会执行一次,即第一次渲染
// 可以传[count],则表示资源count变化才会调用
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
// 当然可以定义多个effect函数,它们会各自执行
const [person, setPerson] = useState(1);
useEffect(() => {
//
}, [person]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
自定义useEffect
某些时候我们需要自定义 Hook,这可以将组件逻辑提取到可重用的函数中
// 这里实现一个count自动 +1 的函数
// 自定义的Hook需要以大写字母开头
// 可以不传useEffect的第二个参数,这和传入callback, time一样
// 如果第二个传入为空将会出现神奇的事情:
// 会发现console会一直打印0,但是count却一直都是1
// 这是因为未传依赖导致每次更新都在运行第一个延时函数,如果需要变化count可以有两种方法
// 第一种是,传第二个参数为[callback, time]或者不传第二个参数
// 第二种是,将Example里的setCount(count + 1)改为setCount(count => count + 1)
// 这种方法将会改变作用域,每次都会取最新的count,大多数情况下都推荐以函数的形式
function UserInterval(callback, time) {
useEffect(() => {
const i = setInterval(callback, time)
return () => {
clearInterval(i)
}
}, [callback, time])
}
export default function Example() {
const [count, setCount] = useState(0)
// 第一种:传第二个参数为[callback, time]或者不传第二个参数
UserInterval(() => {
console.log(count)
setCount(count => count + 1)
}, 1000)
// 第二种:将Example里的setCount(count + 1)改为setCount(count => count + 1)
// UserInterval(() => {
// console.log(count)
// setCount(count => count + 1)
// }, 1000)
return (
<div>
you count: {count}
</div>
)
}
还有其他的几个Hook讲解,包含 useContext,useReducer,useRef,useCallback,useMemo,useImperativeHandle,useLayoutEffect ,useDebugValue