useEffect和心智模型总结

useEffect

可以在主函数里面多次调用，主要用于监听不同的参数，第一个参数也可以使用函数！！
[source]参数不传时，则每次都会优先调用上次保存的函数中返回的那个函数，然后再调用外部那个函数；
[source]参数传[]时，则外部的函数只会在初始化时调用一次，返回的那个函数也只会最终在组件卸载时调用一次；
[source]参数有值时，则只会监听到数组中的值发生变化后才优先调用返回的那个函数，再调用外部的函数，不能为引用类型否则死循环。
会在每次 render 的时候必定执行一次。
如果返回了函数，那么在下一次 render 之前或组件 unmount 之前必定会运行一次返回函数的代码。
如果指定了依赖数组，且不为空，则当数组里的每个元素发生变化时，都会重新运行一次。
如果数组为空，则只在第一次 render 时执行一次，如果有返回值，则同 3。
如果在useEffect中更新了 state，且没有指定依赖数组，或 state 存在于依赖数组中，就会造成死循环。

//useEffect 第一次进来不触发
 useEffect(() => {
    if (isFirstRun.current) { 
      isFirstRun.current = false;
      return;
    },[])

//useEffect 多个 要切换等情况第二个位置参数数量不可变用null代替占位。
 useEffect(() => {

    },[params,null,null,null,null])

hooks所遇到的心智模型（纯hooks或者hooks和class混用避免多次渲染）：

1.父class子hooks，子用memo。
2.父hooks子class，子用PureComponent。
3.父子都是hooks，父用useMemo()包含传给子的参数。
4.一个函数中不要用子组件来装jsx, 因为会导致每次update, 重新渲染所有子组件的dom, 哪怕子组件dom没有改变, 建议也必须重新放一个顶层函数装jsx.(或者用函数()代替子组件)