React-Hooks

Simple Rules of Customized Hooks

首先，它是一个函数，跟普通的函数几乎没有区别

• 命名上面，以 usexxx 方式
• 内部用到的其他hooks, 必须至于最顶层， 不能加任何条件，unCondition
• 记住，它真的只是一个函数，别想太多。

Hook 函数的使用规则

• Hook 函数的调用必须在最顶层
  • 因为React 要求函数组件每一次的运行，Hook出现的顺序必须一致，所以Hook 函数不可以出现在if, 等条件语句里。为社么呢，什么叫最顶层呢？ 最顶层指的是组件，主要是触发React.createElement, 就会有这个顶层容器出现， 然后在这个容器里面会出现这么个奇怪的数组const hookArray=[hook1,hook2,hook3,xxx] React 要求每一次的运行Functional Component, 这个数组里面的内容不能改变，内容可以理解成ref, 里面的值可以变化。

---

Functional 组件 vs Function call 有什么区别

先说结论：

• Functional Component 会触发React.createElement, 创建VirtalDom, function 里面的内容会被封装在这个virtual Dom 里面， Function call 则直接返回里面的内容。
• Hook 的容器，Function Component 会创建Hook 容器， 参考上面

来个网上的例子。

import * as React from 'react'
function Counter() {
  const [count, setCount] = React.useState(0)
  const increment = () => setCount(c => c + 1)
  return <button onClick={increment}>{count}</button>
}
function App() {
  const [items, setItems] = React.useState([])
  const addItem = () => setItems(i => [...i, {id: i.length}])
  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      // error line
      - <div>{items.map(Counter)}</div>
      // correct line
      + <div>{items.map(i => <Counter key={i.id} />)}</div>
    </div>
  )
}

TBD