Hooks API

1. useState

const [state, setState] = useState(initialState);

函数式更新state

setState(preCount => preCount + 1);
setStete(preCount => preCount - 1);

如果pre 和 curent是完全相同的，则随后的重渲染会被跳过。

合并新老对象

const [state, setState] = useState({});
setState(preState => {
    return {...prevState, ...updateadValues};
    // 或者使用Object.assign
})

由于hooks中setState不会合并新老对象（不同于类组件中setState），所以需要自己操作。

惰性初始化state

const [state, setState] = useState(() => {
    const initialState = fn(props);
    return initialState;
})

需要一个复杂的初始化值，可以传入一个函数。这个函数只有在初始渲染的时候才会运行。

跳过state更新

setState(initValue);

两次传入相同的state那么react会跳过重新渲染（内部采用Object.is方法判断是否相同）。如果渲染碰到需要高开销的运算，要用useMemo做缓存

2. useEffect

useEffect(didUpdate);

useEffect(() => {
    const subscription = props.source.subscribe();
    return () => {
        subscription.unscribe();
    };
});

useEffect会在浏览器完成布局和绘制之后，在一个延迟事件中被调用。在开始新的更新前，React总会先清除上一轮渲染的effect

依赖数组

useEffect(() => {
    const subscription = props.source.subscribe();
    return () => {
        subscription.unsubscribe();
	};
}, [props.source]);

只有在依赖项都发生改变的时候才重新创建。传入一个空数组，那么effect内部就会一直持有props和state初始值

3. useContext

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

// createContext决定context类型
const ThemeContext = React.createContext(themes.light);

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

4. useReducer

const [state, dispatch] = useReducer(reducer, initialArg, init);

const initialState = {count: 0};

function reducer(state, action) {
    switch(action.type) {
        case 'increment':
            return {count: state:count + 1};
        case 'decrement': 
            return {count: state.count - 1};
        default:
            throw new Error();
    }
}

function Counter() {
    const [state, dispatch] = useReducer(reducer, initialState);
    
    return (
        <div>
        	<button onClick={() => dispatch({type: 'increment'})}></button>
        </div>
    )
}

惰性初始化(采用初始化函数方式创建)

function init(initialCount) {
    return {count: initialCount};
}

function reducer(state, action) {
    case: 'reset'
    	return init(action.payload);
    default:
    	throw new Error();
}

function Counter({initialCount}) {
    const [state, dispatch] = useReducer(reducer, initialCount, init);
    
    return (
        <button onClick={() => dispatch({type: 'reset', payload: initialCount})}></button>
    )
}

跳过dispatch

如果Reducer Hook返回值与当前state相同，React将跳过子组件的渲染以及副作用的执行。采用(Object.is来比较)

可以采用useMemo优化渲染前高开销的计算。

5. useCallback

const memorizedCallback = useCallback(
    () => {
        doSomething(a, b)
    },
[a, b]);
// 返回一个memorized函数
// 如果memorizedCallback传递给子组件，a和b不变的情况下，子组件不会重新渲染

只有当a,b的值发生改变，才会重新执行。

6. useMemo

const memorizedValue = useMemo(() => computeExpensive(a, b), [a, b]);

返回一个memorized的值。这种优化有助于避免在每次渲染时都进行高开销的计算。避免没有意义的计算。

7. useRef

const refContainer = useRef(initialValue);

useRef返回一个可变的ref对象，.current属性被初始化为传入的参数。

8. useImperativeHandle

通常需要配合ref转发（暂时不知道咋用，待更新）

9. useLayoutEffect

参考博客buuug

import React, { useEffect, useLayoutEffect, useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const [state, setState] = useState("hello world")

  useEffect(() => {
    let i = 0;
    while(i <= 100000000) {
      i++;
    };
    setState("world hello");
  }, []);

  // useLayoutEffect(() => {
  //   let i = 0;
  //   while(i <= 100000000) {
  //     i++;
  //   };
  //   setState("world hello");
  // }, []);

  return (
    <>
      <div>{state}</div>
    </>
  );
}

export default App;

// 这里采用useEffect将会出现闪烁但是useLayoutEffect将不会