【Day26】Function Component 生命周期 & Hook (´･∀･`)

讲到Function Component 一定是会讲到Hook的!

Hook 让我们可以不用改变Component的阶层就可以重用stateful的逻辑。

Hook 是在React版本16.8所增加的功能，虽然说相较Class Component，
Function Component的生命周期比较单纯，但目前React没有计画要移除Class Component，
所以我们也许会碰到只使用Class Component的专案、只使用Function Component的专案又或是两种并存的专案(因为Hook是可以和既有的程序码一起运作)。

前面在绘制我们的简单计数器时，有稍稍的使用到Hook来去建立我们在function里的state，
还记得前面用到的useState吗 !? 对! 那就是Hook用来建立state的方式。

useState的概念类似Class Component里的 this.setState，
但它不会把旧的和新的state并在一起。

传入的参数是state的初始状态 (不像this.state一样一定要是物件)

function App() {
  	const [count, setCount] = React.useState(0);
  }

Function Component的生命周期 是使用 useEffect来执行，
useEffect会在每次render後执行，包含第一次的render，
且useEffect跟useState一样可以同时使用很多个!

useEffect的第一个参数传入的是要执行的程序码，第二个参数传入的是一个阵列，
阵列里可以放入上层的props，可以去侦测props是否变动，来去执行effect。

Hook的规则

• 只在最上层呼叫Hook，不能在回圈、判断式、或是Function内的变数function使用
• 只在Function Component呼叫Hook，不要在一般的JS Function里呼叫Hook (除了刻制化的Hook)
• 自己刻制化的Hook 可以在function内使用
• Hook是重复使用stateful逻辑的方式，不是state本身，其实，每次呼叫一个Hook都会有个完全独立而且隔离的state，甚至可以在一个Component里使用同一个刻制化Hook多次

咦!? 各位看官可能觉得上述提到的好像只有类似Class Component里面的componentDidMount和componentDidUpdate 呀 ， 那我如果要在Hook里用componentWillUnMount怎麽办 !?

在useEffect里，我们可以透过回传一个function的方式来代替componentWillUnMount

  useEffect(() => {
   
   //要执行的程序码
   
      //在这个effect之後进行清除
    return function cleanup() {
     
    };
  });

以上是 Function Component里会用到的Hook及生命周期(Effect)，

小菜鸟已经竭尽所能地用最短的文字去叙述了，希望还算简洁清楚 இдஇ

下一篇，要前往保管全局states的Redux了 (稍稍难一些些) ，快了!快结束了，撑住R ~~