HOOKS学习笔记
类组件与函数组件的区别
类组件可以定义自己的state，用来保存自己的内部状态，类组件有自己的生命周期，可以在对应的生命周期中完成对应的逻辑操作。在componentDidMount发送网络请求，在数据更新时可以调用componentDidUpdate生命周期，在状态发生改变只会重新执行render函数
类组件中产生的副作用需要在componentWillUmmount中清除，比如redux中手动调用subscribe
函数组件不可以，函数每次调用都会产生新的临时变量，函数组件被重新渲染时，整个函数都会被重新执行
memo的作用：类似于类组件的pureC，会对props进行浅层比较，如果发生更新就重新渲染，如果没有发生更新就不会重新渲染
hooks
需要在react中导入
使用hooks的原则
只能在函数最外层调用Hook。不要在循环、条件判断或者子函数中调用。
只能在React 的函数组件中调用Hook。不要在其他JavaScript 函数，如果需要做条件判断，则可以将判断放到hook的内部
useState
用于保存状态
const [count, setCount] = useState(0);
const [firends, setFirends] = useState(['kobe', 'mar']);
useState的唯一参数就是初始state,
返回值是一个数组（当前state的值，设置新的值时使用的函数）
调用setState会做两件事情：设置新的值，组件重新渲染，根据新的值返回DOM结构
setState可以传入对象 | 函数，实现结果同于setState({})
每次更改状态做的都是替换的操作
setFriends([...friends,'tom'])
复杂对象的操作
function incrementAgeWithIndex(index) {
const newStudent = [...student];
newStudent[index].age+=1
setStudents(newStudent)
}
useEffect
完成类组件中生命周期的功能：比如网络请求，手动更新DOM，事件监听。useEffect接收两个参数，第二个参数为可选参数，第一个参数为回调函数（在发生更新后就执行回调函数），在完成DOM更新后执行回调。
useEffect(() => {
document.title = `You clicked ${count} times`;
});
useEffect中返回一个函数：effect的可选清除机制，每一个effect都可以返回一个清除函数。react会在卸载的时候执行清除操作。
第二个参数：传入数组类型（性能优化），监听依赖变量改变后再执行hook中的回调函数
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
如果仅传入空数组，不传入依赖变量，则useEffect只会执行一次
useContext
接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。
当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给 MyContext provider 的 context value 值
父组件
创建context对象
export const UserContext = createContext();
<UserContext.Provider value={{name:'byj'}}>
<ContextHookDemo/>
</UserContext.Provider>
子组件
import {UserContext} from "../App"
通过user拿到父组件共享过来的数据（对应的就是父组件穿件的context对象）
const user = useContext(UserContext)
useReducer
是useState的一种替代方案，主要是在处理逻辑复杂用于拆分，或者这次修改的state需要依赖之前的state时使用
reducer共享的仅仅是操作函数，数据不会共享
userCallbcak
用途：性能优化。传入一个回调函数返回执行后的函数，在依赖不改变或者没有添加依赖的情况下，返回的永远是同一个值
使用场景：将组件中的函数传递给子组件进行回调使用时，使用useCallback对函数进行处理，useCallback直接对值进行优化
useMemo
用途：性能优化，返回一个memoized值（可以是对象或函数等），在依赖不改变或者没有添加依赖的情况下，返回的永远是同一个值
useMemo传入一个回调函数，返回一个值作为usememo的返回值，可以传入依赖项，当依赖项发生改变后函数才会重新执行一次
useRef
返回一个对象，返回的ref对象在组件的整个生命周期保持不变。用法：引入dom元素，保存一个数据，这个对象在整个生命周期中保持不变
|