React整理总结（七、Hooks）

1.Class组件的优缺点

优点

• class组件可以定义自己的state，用来保存组件自己内部的状态；函数式组件不可以，因为函数每次调用都会产生新的临时变量；
• class组件有自己的生命周期，我们可以在对应的生命周期中完成自己的逻辑；
  比如在componentDidMount中发送网络请求，并且该生命周期函数只会执行一次； 函数式组件在学习hooks之前，如果在函数中发送网络请求，意味着每次重新渲染都会重新发送一次网络请求；
• class组件可以在状态改变时只会重新执行render函数以及我们希望重新调用的生命周期函数componentDidUpdate等； 函数式组件在重新渲染时，整个函数都会被执行，似乎没有什么地方可以只让它们调用一次；

缺点

• 复杂组件变得难以理解
• 难以理解的class
• 组件复用状态很难：
  • 高阶组件；
  • redux中connect或者react-router中的withRouter
  • 于Provider、Consumer来共享一些状态

hooks

• 简单总结一下hooks：
  • 它可以让我们在不编写class的情况下使用state以及其他的React特性；
  • 但是我们可以由此延伸出非常多的用法，来让我们前面所提到的问题得到解决；
• Hook的使用场景：
  • Hook的出现基本可以代替我们之前所有使用class组件的地方；
  • Hook只能在函数组件中使用，不能在类组件，或者函数组件之外的地方使用；

2. 常用hooks

• 2.1useState保存状态

const [msg, setMsg] = useState("hello hooks");

• 2.2useEffect副作用

useEffect(() => {
	// 执行
	return () => {
		// 取消
	}
}, [//依赖项])

• 2.3useContext(XXXContext)接获取某个Context的值

// context.js
import { createContext } from 'react';

const UserContext = createContext();
const ThemeContext = createContext();

export default {
UserContext, ThemeContext
}

// App.jsx
<UserContext.Provider value={{name: 'xiaoming', age: 18}}>
	<ThemeContext.Provider value={{color: 'red', size: 12}}>
		<App>
	</ThemeContext.Provider>
</UserContext.Provider>

// Function Comp
export default () => {
	const USER = useContext(UserContext);
	const THEME = useContext(ThemeContext);
	
	return (<>
		<h2>{USER.name}-{USER.age}</h2>
		<h3 style={{color: THEME.color, size: THEME.size}}>content</h3>
	</>)
}

• 2.4userReducer()管理负责数据， useState的替代品，而非redux的替代品

// const [state, dispatch] = userReducer(reducer, initState);

import React, { memo, userReducer } from 'react';

function reducer(state, action){
	switch(action.type){
		case 'add':
			return {...state, counter: state.counter + action.payload};
		case 'sub':
			return {...state, counter: state.counter - action.payload};
		default:
			return state;
	}
}

export default memo(() => {
	const [state, dipatch] = useReducer(reducer, {counter: 0});
	return <>
		<h2>counter: {state.counter}</h2>
		<button onClick={() => dispatch({type: 'add', payload: 5})}>+5</button>
		<button onClick={() => dispatch({type: 'sub', payload: 5})}>-5</button>
	</>
})

• 2.5 性能优化useCallback记忆化回调函数，useMemo

useCallback会返回一个函数的 memoized（记忆的） 值；在依赖不变的情况下，多次定义的时候，返回的值是相同的；

作为参数传递给子组件时使用;

const fn = useCallback(() => {
	dosomething(a, b);
}, [a, b]);

配合useRef使用;

const [count, setCount]  = useState();
const countRef = useRef();
countRef.current = count;
const addFn = useCallback(() => setCount(countRef.current + 1), []);

useMemo(() ={}, [dep])对回调函数的结果进行缓存

useCallback(fn,[dep]) = useMemo(() => fn, [dep])

- 进行大量的计算操作，是否有必须要每次渲染时都重新计算；
- 对子组件传递相同内容的对象时，使用useMemo进行性能的优化

• 2.6 useRef返回一个ref对象，返回的ref对象再组件的整个生命周期保持不变。

  • 用于获取dom元素
  • 用于保存具体的值，解决闭包陷阱

• 2.7 useImperativeHandle子组件向父组件传递特定的对象

const SonComponent = memo(forwardRef((props, ref) => {
	const inputRef = useRef();
	useImperativeHandle(() => {
		return {
			focus(){
				inputRef.current.focus();
			}
			setValue(val){
				inputRef.current.value = val;
			}
		} //返回的这个对象会被绑定到ref.current
	})
	
	return (<>
		<h2>son component<h2>
		<input ref={inputRef}/>
	</>)
}))

const FatherComponent = memo(() => {
	const sonRef = useRef();
	return (<>
		<h1>father comp</h1>
		<SonComponent ref={sonRef} />
	</>)
})

• 2.8 useLayoutEffect()

  • useEffect会在渲染的内容更新到DOM上后执行，不会阻塞DOM的更新；
  • useLayoutEffect会在渲染的内容更新到DOM上之前执行，会阻塞DOM的更新；

3. 自定义hook

• 形如useFn，内部可以使用其他hook

// 获取滚动位置
export function useWindomPosition(){
	const [position, setPosition] = useState();
	const handleScroll = () => {
		setPosition(window.scrollY);
	}
	
	useEffect(() => {
		document.addEventListener('scroll', handleScroll);
		return () => {
			document.removeEventListener('scroll', handleScroll);
		}
	})
	
	return position;
}

// 使用localStorage存储数据
export function useLocalStorage(key){
	const [data, setData] = useState(() => JSON.parse(window.localStorage.getItem(key)));
	useEffect(() => {
		window.localStorage.setItem(key, data);
	}, [data]);
	return [data, setData];
}

4.其他hook

• useSelector将state映射到组件中;useDispatch直接获取dispatch函数;useStore获取store对象；
  • 参数一：将state映射到需要的数据中；
  • 参数二：可以进行比较来决定是否组件重新渲染。如果state中的a发生变化，某个组件只用了state中的b，也会重新渲染，所以需要第二个参数优化。

// 1.获取state
import { useSelector, useDispatch, shallowEqual } from 'react-redux';
const { count } = useSelector((state) => {
	return {
		count: state.counter.count
	}
},shallowEqual)

• useId用于生成横跨服务端和客户端的稳定的唯一 ID 的同时避免 hydration 不匹配的 hook。
  • useId是用于react的同构应用开发的，前端的SPA页面并不需要使用它；
  • useId可以保证应用程序在客户端和服务器端生成唯一的ID，这样可以有效的避免通过一些手段生成的id不一致，造成
    hydration mismatch；
• useTransition返回一个状态值表示过渡任务的等待状态，以及一个启动该过渡任务的函数。告诉react对于某部分任务的更新优先级较低，可以稍后进行更新。
• useDeferredValue接受一个值，并返回该值的新副本，该副本将推迟到更紧急地更新之后。