Hook

• 是React16.8一个新增项,它可以让你在不编写class的情况下使用state以及其他的React特性
• 特点:
  1. 无需修改组件结构的情况下复用状态逻辑
  2. 将组件相互关联的部分拆分成更小的函数,复杂组件将变得更容易理解
  3. 更简洁、更易理解的代码

使用Hook的栗子

import React, { useState } from 'react'export default function HookTest() {// useState(initState)const [count, setCount] = useState(0)// 多个状态const [age] = useState(20)const [fruit, setFruit] = useState('banana')const [input, setInput] = useState('')const [fruits, setFruits] = useState(['apple', 'banana'])return (<div><p>点击了 {count} 次</p>// 每点击一次按钮,次数+1<button onClick={() => setCount(count + 1)}>点击</button><p>年龄: {age}</p><p>选择的水果: {fruit}</p><p>//  每点当input框输入改变时,更新input的值<input type="text" value={input} onChange={e => setInput(e.target.value)} />// 将水果放入水果列表中.然后清空input<button onClick={()=>{setFruits([...fruits, input]);setInput('')}}>新增水果</button></p><ul>{fruits.map(f => (<li key={f} onClick={() => setFruit(f)}>{f}</li>))}</ul></div>)
}

副作用钩子 - Effect Hook

• useEffect就是一个Effect Hook,给函数组件增加了操作副作用的能力.
• 它跟class组件中的componentDidMount、componentDidUpdate和componentwillUnmount具有相同作用(只不过是合并了)
• 栗子: 更新 HooksTest.js

import React, {useState, useEffect } from 'react';
useEffect(() => {// Update the document title using the browser APIdocument.title = `您点击了 ${count}次`
})// 监听count的变化
useEffect(() => {console.log('count依赖');document.title = `您点击了${count}次`
},[count]);
// 此时只有count发生改变时才触发这个副作用钩子

• 注:
  1. 相当于是观察数据,当观察的数据发生变化时执行
  2. 第二个参数用于收集观察的数据

自定义钩子 - Custom Hook

• 自定义Hook是一个函数,其名称以"use"开头,函数内部可以调用其他的Hook.

function useAge() {const [age, setAge] = useState(0);useEffect(() => {setTimeout(() =>{setAge(20)}, 2000)});return age;
}// 使用
const age = useAge();
<p>年龄 {age? age: 'loading...' }</p>