React Hooks的使用

1. React的Hooks的定义

hook的英文翻译

n. 挂钩，吊钩
vt. 钩住；引上钩
vi. 钩住；弯成钩状

hook在react中的作用

• hook是react16.8+版本出现的新语法/新特性
• 可以在函数式组件中使用state和其他react特性

2. react中3个常用的hook方法

2.1 useState()

• state hook让函数式组件可以使用state状态，并对state状态中的数据进行操作
• 使用语法

const [param01, param02] = React.useState(initData)

• initData–相当于state中定义的属性的value值。第一次初始化指定的值在内部做缓存
• useState()方法返回一个数组，包含2个元素
• param01 相当于state中定义的属性的key值。内部当前的状态值
• param02 更新状态值的函数或者新的状态值
  • 可以是一个新的值
  • 可以是一个箭头函数，带返回值的

2.2 useEffect(()=>{})

• 可以在函数式组件使用生命周期钩子
• 传入的参数是一个箭头函数，相当于在操作react生命周期
• 可能操作的生命周期有三个

componentDidMount()//组件加载
componentDidUpdate()//组件更新
componentWillUnmount()//组件即将卸载 

• 举例如下：

useEffect(param01, param02)

• param01–是一个函数 ()=>{}
• param01 相当于调用componentDidMount()、componentDidUpdate()方法
• param02–不使用param02或者数组
  • 不使用param02 相当于 param01这个函数，任意属性值的发生改变都会调用param01
  • param02=[] ，相当于param01这个函数，只会在在第一次render后执行，
  • param02=[count,add]，相当于param01这个函数，第一次render后执行，同时当count或add值改变时执行param01
• param01函数的返回值是一个函数，这个返回的函数就是相当于componentWillUnmount()

2.3 useRef()

• Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据
• 语法: const refContainer = useRef()
• 作用:保存标签对象,功能与React.createRef()一样