Hook 概观（ Day15 ）

如果想快速使用 Hook ，其实就参考 Hook 概观分的五个面向，包含一定会用也最常用的 State Hook、Effect Hook，以下罗列：

State Hook
Effect Hook
Hook 的规则
打造你自己的 Hook
其他 Hook

复习一下 Hook 是什麽?

Hook 是 function，他让你可以从 function component「hook into」React state 与生命周期功能。

State Hook

我们在 function component 中呼叫 State Hook 用来加入一些 local state。但为什麽不直接宣告一个变数或物件储存就好了? 因为需要进行资料的追踪，所以还会搭配 set 事件，以下举例。

在上一篇 Hello Hook 已经举过单一个 State Hook 的例子，在这里补充多个的宣告。例如设定 fruit，setFruit 进行 fruit 资料的储存跟修改。

function OneMeal() {
  // 宣告多个 state 变数!
  const [bento, setBento] = React.useState("???");
  const [fruit, setFruit] = React.useState("?");
  const [beverage, setBeverage] = React.useState([{ text: '?' }, { text: '?' }, { text: '?' }]);
  
  return (
    <div>
      <h1>Hello useState</h1>
      <p> { bento } </p>
      <p> { fruit } </p>
      <ul>
          { 
            beverage.map((item)=>{
               return <li key={item.text}>{ item.text }</li>
            })
          }
      </ul>
      <button onClick={()=>{setFruit(fruit + '?')}}>Add Fruits</button> 
    </div>
  )
}

\\略

Codepen 附完整代码

Effect Hook

记得在生命周期有学到 componentDidMount，componentDidUpdate，与 componentWillUnmount ，而 Effect Hook 把这些功能整合在一起，React component 把 fetch 资料、订阅、或手动改变 DOM 视作基本渲染以外的「副作用」，定针对这些处理写了一个 Effect Hook 来集中我们这些「副作用」的关注点。

function TestUseState() {
  const [title, setTitle] = React.useState("I am waiting...");
  
  React.useEffect(() => {
    
    async function getTitle() {
      let response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
      response = await response.json()
      setTitle(response.title)
    }
  
   getTitle()
  });

  return (
    <div>
      <h3>Hello UseEffect Hook</h3>
      <p>{ title }</p>
    </div>
  )
}

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <TestUseState />
      </div>
    );
  }
}

//略

Codepen 附完整代码

官方订定的 Hook 规则

只在最上层呼叫 Hook。不要在回圈、判断式、或是嵌套 function 中呼叫 Hook。
只在 React function component 呼叫 Hook。不要在一般 JavaScript function 中呼叫 Hook。（只有一个其他有效的地方可以呼叫 Hook——你自己的客制化 Hook。）

打造你自己的 Hook

当几个元件使用了同样的逻辑时，我们可以抽出并定义一个共通逻辑的 function 。在 Hook 出现以前，使用的解法都是 higher-order components 与 render props (後续文章补充)。以下举例 setimeout 的共用逻辑，定可设定不同的 delay 时间。

function myTimeout(delay) {
  const [show, setShow] = React.useState(false);

  React.useEffect(
    () => {
      let timer1 = setTimeout(() => setShow(true), delay * 1000);
      return () => {
        clearTimeout(timer1);
      };
    },
    []
  );

  return show;
}

function Vender() {
  const [banana, takeBanana] = React.useState(0);
  const timer1 = myTimeout(1)
  const timer2 = myTimeout(3)

  return (
    //略
  );
}

Codepen 附完整代码