【Day 21】React 关於 Hook

前言

React hook 是 React V16.8 新增的功能，它改变了 React 写 Class Component 的习惯，转而改成写 Functional Component，早期的 React 元件事实上就区分为 Class 跟 Functional两种，但是 Class 通常是可以控制 State 跟 生命周期的而 Functional 主要是用来呈现 UI 的部分，而 Hook 打破这层限制，统一使用 Functional Component，直接在内部就可以管理 State。

其实 Hook 很像 JS 的 Module Pattern，Module Pattern 是 JS 利用函数闭包(Closure)的特性，藉由闭包实现封装的功能，将变数和方法限制在范围内使用，达到避免(变数、功能)全局污染的一种方法。

Module Pattern (模组模式)

因为 Javascript 原生并没有 private, public, protected 的概念，而是依靠作用域，所以要切分开来只能依靠闭包。(不清楚可以看：【Day 6】关於ES6作用域)

闭包(Closure)：闭包是指变数的生命周期只存在在该 function 中，如果离开了 function，变数会自动被回收而且不可在使用，而且必须要事先在 function 中宣告。

Module Pattern: 就是利用闭包的特性，将变数和函数限制在特定范围内使用

举例来说：

var exampleModule = (function(){
  var counter = 0;
  return {
    increase: function() {
      return counter += 1;
    },
    decrease: function() {
      return counter -= 1;
    }
  }
}());
console.log(exampleModule.increase()); // 1
console.log(exampleModule.decrease()); // 0

从 React 到 React Hook

原始写法：

import React, { Component } from 'react';

class Example extends Component {
    constructor(props) {
        super(props);
        this.state = { count:0 }
        this.increase = this.increase.bind(this);
    }
    increase(){
        this.setState({count:this.state.count+1})
    }
    render() { 
        return (
            <div>
                <p>你已经点了 {this.state.count} 次</p>
                <button onClick={this.increase}>点我</button>
            </div>
        );
    }
}
export default Example;

React Hook 写法:

import React, { useState } from 'react';
function Example(){
    const [ count , setCount ] = useState(0);
    return (
        <div>
            <p>你已经点了 {count} 次</p>
            <button onClick={()=>{setCount(count+1)}}>点我</button>
        </div>
    )
}
export default Example;

这里要注意，要使用 React Hook 并不需要另外安装套件，而是 React 16.8 以上的内建功能。

React Hook 优点

较接近原生的 js 写法，对於刚开始接触的人有好处，且不需要懂 ES6 也可以写
减少了解太过多余的元件周期，只要控制好 useEffect 即可
用相对简单的写法解决复杂的问题，这点尤其重要

1.元件更好重复利用

• 每次调用 Hook 的 Component，都会另外生成一份 Component 独立的 State
• UseState 和 UseEffect 虽然依赖於元件，但是可以在元件外部去做定义

2.程序码更简洁

• useState 可以直接读取并且写入 state，与原先需要 setState()的方法不同
• useEffect 取代了 componentDidUpdate, componentDidMount, componentWillUnMount 生命周期的逻辑

React Hook 缺点

状态不同步

当下面这段程序运行的时候，可以试着先点击“3 秒後跳出值”的按钮，在去点击“增加”的按钮，就会发现最後Alert 的数字是当时“点击3 秒後跳出值”的当前数值，而不是最後的增加後的数值。这是因为异步操作时，所引用的变量是之前的(作用域与闭包概念)，但是这问题在 Class Component 就不会发生，因为 Class Component 的属性都放在一个 instance 上，并且使用 this.state.xxx 和 this.method() 进行调用，而每次都是在同一个 instance 上取值，所以没有所谓之前的值的问题。

import React, { useState } from "react";
const Example = () => {
  const [counter, setCounter] = useState(0);
  const onAlertButtonClick = () => {
    setTimeout(() => {
      alert("最後显示值: " + counter);
    }, 3000);
  };
  return (
    <div>
      <p>你已经点了 {counter} 次</p>
      <button onClick={() => setCounter(counter + 1)}>增加</button>
      <button onClick={onAlertButtonClick}>
        3 秒後跳出值
      </button>
    </div>
  );
};

export default Example;

结论

• 介绍了 React Hook 优缺点
• 介绍了 Module Pattern