Hooks的钩子函数
1. useState
作用: 给函数组件添加状态
import React, {useState} from 'react';
const [name, setName] = useState('张三');
// 使用useState来创建状态
1. 引入useState ,import React, {useState} from 'react';
2. 接收一个参数作为初始值;
3. 返回一个数组,第一个值为状态,第二个值为改变状态的函数。
import React, {useState} from 'react';
function stateFunction () {
const [name, setName] = useState('');
return <div onClick={() => {setName('李四')}> {name} </div>
}
export default stateFunction
2. useEffect
作用:给没有生命周期的组件,添加结束渲染的信号,render执行之后执行。可以用componentDidMount()来模拟useEffect。
import React, {useEffect} from 'react';
useEffect(() = {
fn2();
return () => {
fn1();
}
}, [deps])
// 使用useEffect
1. 引入useEffect ,import React, {useEffect} from 'react';
2. 接收一个函数作为参数;
3. 接收第二个参数作为依赖列表,只有当依赖更新的时候才执行。
4. 返回一个函数,先执行返回函数fn1,再执行参数函数fn2。
import React, {useEffect} from 'react';
function stateFunction () {
const [num, setNum] = useState(1);
useEffect ( () => {
document.body.addEventListener( 'abc', () => {});
return () => {
document.body.removeEventListener('abc', ()=>{})
}
}, [num])
return <div onClick={() => {setNum( num => num+1)}> {num} </div>
}
export default stateFunction
3. useLayoutEffect
作用:dom更新完成之后执行某个操作,有dom操作的副作用hooks,可以使用类组件中的componentWillMount()来模拟useLayoutEffect()。useLayoutEffect再useEffect之前执行。
import React, {useLayoutEffect} from 'react';
useLayoutEffect(() = {
fn2();
return () => {
fn1();
}
}, [deps])
// 使用useLayoutEffect
1. 引入useLayoutEffect ,import React, { useLayoutEffect } from 'react';
2. 接收一个函数作为参数;
3. 接收第二个参数作为依赖列表,只有当依赖更新的时候才执行。
4. 返回一个函数,先执行返回函数fn1,再执行参数函数fn2。
import React, { useLayoutEffect } from 'react';
function stateFunction () {
const [num, setNum] = useState(1);
useLayoutEffect ( () => {
document.body.addEventListener( 'abc', () => {});
return () => {
document.body.removeEventListener('abc', ()=>{})
}
}, [num])
return <div onClick={() => {setNum( num => num+1)}> {num} </div>
}
export default stateFunction
4. useMemo
作用:让组件中的函数跟随状态更新。优化函数组件中的功能函数。
const getNumber = useMemo(() => {
return num * 2
}, [deps])
//useMemo使用方法
1. 接收一个函数作为参数
2. 第二个参数为依赖列表
3. 返回的是一个值
未完待续........