笔记：React 17.0 函数组件

Fiber

Hooks

useState
①初始值可以是一个函数返回的结果，该函数只会在初始化时执行一次。
②更新引用类型数据，需要引用地址改变才能更新状态。
③若更新的状态不变，则该状态更新操作会被跳过。V18版本默认开启所有批处理，在之前的版本仅对事件中的更新进行批处理。
④状态更新是异步的，多次更新相同的状态只取最后一次操作，否则需要用函数式，接收最新的状态值。

const [value, setValue] = useState(() => initValue);
setValue({...value, key: value});
setValue((preValue) => {});

useMemo
①缓存一个函数，其中的变量（即使是闭包）均被固定，返回缓存后的函数结果。
②组件更新时，缓存的函数结果仅当依赖项变化时才重新计算结果，否则使用上一次缓存的计算结果，用于提高性能。

const value = useMemo(() => {}, [dependent])

useCallback
①缓存一个函数，其中的变量（即使是闭包）均被固定，返回缓存后的函数。
②组件更新时，缓存的函数仅当依赖项变化时才更新其中的变量，否则使用上一次缓存的函数，用于提高性能。

const fun = useCallback(() => {}, [dependent])

useRef
①返回一个可变的对象，其current属性为传入的初始值。该对象在整个生命周期均存在。
②可储存一个DOM节点，或储存一个需要同步更新的状态数据，不会更新组件。

const ref = useRef()

useImperativeHanle
①结合forwardRef()，父组件只能够访问子组件暴露的指定数据或方法。

// 子组件
const Child = (props, ref) => {
  useImperativeHandle(ref, () => ({
	fun: () => {},
  }), [dependent])
  return <div ref={ref} />
}
export default forwardRef(Child);
// 父组件
const childRef = useRef();
<Child ref={childRef}>
childRef.current.fun();

useEffect
①副作用函数会在组件初次渲染到屏幕之后异步执行。每次组件更新前都会执行完上一次的副作用函数。
②副作用函数的返回值是一个函数，在组件卸载前或组件更新后执行，模拟componentWillnmount()生命周期函数。用于清除事件订阅与定时器，防止内存泄漏。
③依赖项不传时，每次组件更新都会执行副作用函数，模拟componentDidUpdate()生命周期函数。
④依赖项为[]时，组件只在初次渲染后执行一次副作用函数，模拟componentDidMount()生命周期函数。
⑤依赖项为多个变量的数组时，在组件初次挂载后或每次依赖项发生变化时执行副作用函数。

useEffect(() => {
  return () => {}
}, [dependent])

useLayoutEffect
①与useEffect作用类似，但在组件初次渲染之前，同步执行完毕后才渲染组件。每次组件更新前都会执行完上一次的副作用函数。

useLayoutEffect(() => {
  return () => {}
}, [dependent])

useContext
①接收一个context对象，返回context中共享的数据状态。

 const value = useContext(Context)

useRender
①创建初始状态和reducer，并作为参数传入useReducer()。
②useReducer()第三个参数，可以对状态进行自定义封装。

// 创建初始状态
const init = {}
// 创建reducer
const reducer = (state, action) => {
  const { type, payload } = action;
  switch (type) {
    case 'actionType':
      return { ...state, key: value };
    default:
      throw new Error();
  }
}
// 使用hook
const [state, dispatch] = useReducer(reducer, init, initFun);
// 派发action
dispatch({ type, payload })

Hooks原理