hooks执行顺序探究

纯函数编程，想要获得较好的执行效率，就必须该执行的代码执行，不该执行的坚决不执行，如果周期不能准确的把握，会导致2类问题。1、出现bug，而且较难定位。2、不需要反复执行的过多次执行，浪费资源。因此，准确了解hooks的执行周期很有必要。

1、 一个标准的Hooks纯函数组件是怎样

return Com = () => {
  const [test, setTest] = useState(0) //useRef,useContext
  useEffect(() => console.log(2))
  useEffect(() => console.log(3), [])
  useEffect(() => console.log(4), [val])
  const fun =() => {
     ...
  }
  console.log(1)
  return (dom)
}   

所有逻辑应该被包装在组件内部的函数内，不应该直接散落在组件内。

2、单个组件内顺序

1,2,3,4,1,2,1,2

useEffect在第一次render后，都会被执行一次，三种情况
1、不带第二个参数，在render后一直执行
2、带空数组，只执行一次
3、带变量，第一次执行，变量变化后执行。

3、父子元素执行顺序

return Paraent = () => {
  const [test, setTest] = useState(0) //useRef,useContext
  useEffect(() => console.log(2))
  useEffect(() => console.log(3), [])
  useEffect(() => console.log(4), [test])
  const fun =() => {
     ...
  }
  console.log(1)
  return (
  <Son/>
  )
}  

return Son = () => {
  const [val, setVal] = useState(0) //useRef,useContext
  useEffect(() => console.log(6))
  useEffect(() => console.log(7), [])
  useEffect(() => console.log(8), [val])
  const fun =() => {
     ...
  }
  console.log(5)
  return (dom)
}

// 执行顺序   1，5 ，6，7，8，2，3，4 
//          1,5,6 2,4      //test变化
//          5,6,8        // val变化

顺序为 父render ->子render-> 子useEffect -> 父useEffect