Hooks是什么？
- Hooks就是让函数组件具有State和其他React特性的能力
为什么使用hooks？
- React有类组件和函数组件两种写法，在没有hooks之前，需要State的组件只能通过类组件实现存在组件之间复用状态逻辑，复杂组件臃肿，难以理解等问题
基础Hooks(useState，useEffect,useRef)的使用
- useState--当需要给函数组件添加state时，使用useState
import React,{useState} from 'react' export default function Person() { // 声明一个state count const [count, setCount] = useState(0); // 使用count进行渲染，并绑定点击时间，使count+1 return ( <div> <p>count:{count}</p> <button onClick={() => setCount(count + 1)}> 点我加一 </button> </div> ); }
上述案例中 const [count, setCount] = useState(0)，count代表变量名称，setCount代表修改变量的方法，useState(0)代表count初始值设置为0，当调用setCount方法之后会主动调用render进而刷新页面
2.useEffect--为组件添加副作用的操作(因为函数式组件没有生命周期相关概念，我们使用useEffect来实现类似生命周期的操作)
a.useEffect第一个参数接受一个回调函数，默认情况下，useEffect会在第一次渲染和更新之后都会执行，相当于在componentDidMount和componentDidUpdate两个生命周期函数中执行回调
import React,{useState,useEffect} from 'react' export default function Person() { // 声明一个state count const [count, setCount] = useState(0); // 使用count进行渲染，并绑定点击时间，使count+1 useEffect(()=>{ console.log(count); }) return ( <div> <p>count:{count}</p> <button onClick={() => setCount(count + 1)}> 点我加一 </button> </div> ); }
b.如果某些特定值在两次重渲染之间没有发生变化，这时候只需要传入第二个参数，React 将对前一次渲染的count和后一次渲染的count进行比较，如果是相等则跳过useEffect执行
import React,{useState,useEffect} from 'react' export default function Person() { // 声明一个state count const [count, setCount] = useState(0); // 使用count进行渲染，并绑定点击时间，使count+1 useEffect(()=>{ console.log(count); },count) return ( <div> <p>count:{count}</p> <button onClick={() => setCount(count + 1)}> 点我加一 </button> </div> ); }
c.回调函数中可以返回一个清除函数，这是effect可选的清除机制，相当于类组件中componentwillUnmount生命周期函数，可做一些清除副作用的操作
const [isOnline, setIsOnline] = useState(null); useEffect(() => { function handleStatusChange(status) { setIsOnline(status.isOnline); } ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); // 返回一个函数，在UnMount时进行清除 return () => { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); }; }, []);
d.总结：useEffect相当于componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个生命周期函数的组合
3.useRef--使用ref
import React, { useRef } from 'react' export default function Person() { const refOne = useRef() const getInput=()=>{ console.log(refOne.current.value); } return ( <div> <input type="text" ref={refOne} name="" id="" /> <button onClick={() => getInput()}> 点我获取输入框数据 </button> </div> ); }
