react hook钩子函数的使用

1. useEffect与useLayoutEffect

useEffect(function(){}, [/*监听的字段*/])
useLayoutEffect(function(){}, [/*监听的字段*/])

2个方法会在数据被构建成功之后调用。useLayoutEffect为同步调用，会直接调用，useEffect为异步调用，创建异步任务并进入循环队列中等待被执行。
useEffect 异步宏任务，会在下一轮事件循环中执行。不会阻塞浏览器对屏幕的渲染更新，但是effect中若有新状态的渲染，在视觉上会有二次渲染问题。第一个参数返回一个函数会在组件卸载时调用。
useLayoutEffect 同步执行，若监听到的字段发生改变时，先执行layoutEffect中的代码再执行下面的代码。在视觉上不会有二次渲染问题，但是effect中若有运行耗时的逻辑时，会有个较长的等待时期。

const [testCount, setTestCount] = useState("test")
useEffect(() => {
  console.log("useEffect", testCount);
  return () => {} // 组件卸载时调用该函数
}, [testCount])
useLayoutEffect(() => {
  console.log("useLayoutEffect", testLayoutCount);
}, [testCount])
useEffect(() => {
	setTimeout(() => {
 		console.log("setTimeout1");
		setTestCount("change")
		console.log("setTimeout2");
	}, 1000);
}, [])

// 执行顺序
// useLayoutEffect test // 进来时运行
// useEffect test // 进来时运行
// setTimeout1
// useLayoutEffect change // 监听数据一改变马上执行useLayoutEffect
// setTimeout2
// useEffect change // 监听数据改变时创建异步宏任务，下一轮循环时调用

2. useCallback与useMemo

useCallback 缓存函数本身
useMemo(React.mome) 缓存函数返回值（返回值为组件）

const foo = useCallback(function func(params) {
	
}, [state]) // 缓存func函数
const fooRes = useMemo(function func(params) {
	return result
}, [state]) // 缓存func函数返回值result

<Children foo={foo} fooRes={fooRes} />

使用场景：作为性能优化， 当需要给子组件传递数据时，正常的数据会在每次重新渲染的时候都传递过去，消耗性能。使用useCallback或useMemo时，只有在state参数改变时才会重新传递，如果值未改变，会跳过重新呈现。

3. useContext + useReducer与redux + react-redux

useContext用于储存数据，会把数据挂在使用的地方，不需要使用组件间传值的方法，所有子节点都能使用该数据。
注： 数据的值变化时，所有引用context的组件都会强迫更新，不管有没有使用改变的值（全局更新）
redux用于储存数据，使用redux的组件不需要组件间传值就能使用全局数据。
注： redux里的值改变时，只会更新使用了该值的组件（局部更新）
useReducer是useState的升级版，能够根据传递的函数对数据进行自定义修改。

useContext
适合对更新状态的逻辑代码不复杂和渲染性能没有很高要求的场景

// parent.js
export const MyContext = React.createContext()
const [contextValue, setContextValue] = useState("value")
<MyContext.Provider value={{contextValue, setContextValue}}>
	<Children />
</MyContext.Provider>

// children.js
import { MyContext } from './parent.js'
import { useContext } from 'react'

const value = useContext(MyContext) // {contextValue, setContextValue}

useContext + useReducer
适合中小型状态管理、对更新状态的逻辑代码不复杂和渲染性能没有很高要求的场景

// parent.js
const reducerData = { name: "" }
function reducer(state, action) {
	switch(action.type) {
		case "A":
			return { name: "A" };
		case "B":
			return { name: "B" };
		default:
			return { name: "" };
		}
}
const [state, dispatch] = useReducer(reducer, reducerData, "A"}
export const MyContext = React.createContext()

<MyContext.Provider value={{ state, dispatch }}>
	<Children />
</MyContext.Provider>

// children.js
import { MyContext } from './parent.js'
import { useContext } from 'react'

const { state, dispatch } = useContext(MyContext) // {contextValue, setContextValue}
// 修改state
dispatch({ type: "B" })

redux + react-redux
适合中大型状态场景，状态规模很大，更新状态的逻辑代码比较复杂，多人协作，对渲染性能有更高的追求

// index.js
import { Provider } from "react-redux";
import store from "./store";
<Provider store={store}>
	<App />
</Provider> 

// store.js
import { applyMiddleware, createStore } from 'redux';
// applyMiddleware: redux通过该函数来使用中间件
// createStore: 用于创建store实例
import thunk from 'redux-thunk';
// 引入reducer
import reducers from './reducer';
// 创建store实例
let store = createStore(
 reducers,
 applyMiddleware(thunk)
)
export default store;

// reducer.js
const commonData = {
	userInfo: {},
	sysInfo: {}
}
const reducer = (state = commonData, action) => {
    switch (action.type) {
        case "USER_INFO":
          return Object.assign({}, state, {
            userInfo: {
              ...state.userInfo,
              ...action.data
            }
          });
        case "SYS_INFO":
          return Object.assign({}, state, {
            sysInfo: {
              ...state.sysInfo,
              ...action.data
            }
          });
        default:
            return state;
    }
}

// App.js
import { connect } from 'react-redux'
// 函数组件
function App(props) {
	const userInfo = props.userInfo
	const sysInfo = props.sysInfo
	// 修改
	props.dispatch({
		type: "USER_INFO",
		data: {}
	})
}
// 类组件
class App extends Component {
	function getUserInfo() {
		return this.props.userInfo
	}
	function setUserInfo() {
		this.props.dispatch({
			type: "USER_INFO",
			data: {}	
		})
	}
}

// 返回的对象会传进组件的props
const mapStateToProps = state => {
  return state
}
// connect连接之后就可以使用redux了
export default connect(mapStateToProps)(App);

4. useRef