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. 返回的是一个值
未完待续........
