拆分抽hook，还是用FC

在拆分代码的时候，可能有疑问：同样是拆分，什么时候抽hook，什么时候抽FC？

因为FC的出现要比hook早，想搞清这个问题，还得从hook的初衷说起。

尝试思考几个问题：什么是hook？什么时候用的？为什么会有这玩意？

像官网的一些hook，useState，useEffect等等，都是为了让FC能用上classComponent有的一些诸如状态和生命周期之类的内容。只不过react做的很灵活，允许我们自定义hook。

hook的本质就是个函数，传参与返回的过程。他的本意是为了让我们把一些独立的处理过程抽出来。是对FC的一种补充，也是FC的一部分。

我尝试做了两个实验。

情景一：在一个父组件里，用一个hook，一个FC，看下渲染情况。

import React, {memo, useState, useEffect} from 'react';
import { render } from 'react-dom';


const DemoFC: React.FC<{pCount: number}> = memo(({pCount}) => {
  const [count, setCount] = useState(0)
  console.log('DemoFC render')
  return <div>DemoFC{count}{pCount}</div>
})

const useDemoHook = (pCount: number) => {
  const [dCount, setDCount] = useState(0)

  console.log('useDemoHook render')
  const ele = <div>
    useDemoHook{dCount}{pCount}
  </div>
  return ele;
}


const Demo: React.FC<{}> = () => {
  const [count, setCount] = useState(1);

  const ele = useDemoHook(count)
  return <div>
    <DemoFC pCount={count}/>
    {ele}
  </div>
}

render(<Demo />, document.querySelector("#app"));

//log:
//useDemoHook render
//DemoFC render

毫无意向，两个都render了一次。纵然在外边改变count的值，渲染次数也是相同的。

情景二：如果我们稍微加一些代码

import React, {memo, useState, useEffect} from 'react';
import { render } from 'react-dom';


const DemoFC: React.FC<{pCount: number}> = memo(({pCount}) => {
  const [count, setCount] = useState(0)
  console.log('DemoFC render')
  return <div>DemoFC{count}{pCount}</div>
})

const useDemoHook = (pCount: number) => {
  const [dCount, setDCount] = useState(0)

  console.log('useDemoHook render')
  const ele = <div>
    useDemoHook{dCount}{pCount}
  </div>
  return ele;
}


const Demo: React.FC<{}> = () => {
  const [count, setCount] = useState(1);
// 新加的 ----
  const [other, setOther] = useState('a');

  useEffect(() => {
    setOther('b')
  },[])
// 新加的 ----
  const ele = useDemoHook(count)
  return <div>
    <DemoFC pCount={count}/>
    {ele}
  </div>
}

render(<Demo />, document.querySelector("#app"));

log:
//useDemoHook render00
//DemoFC render00
//useDemoHook render00

结果：hook渲染了两次，FC渲染了一次。

综上：

hook本质是逻辑拆分，属于父级组件函数的一部分。子FC在react中可以用memo优化，避免不必要的渲染。

如果你的组件很简单，可以写在hook里直接返回，不会有太大的成本。

如果组件比较复杂，或者有性能问题，需要优化的时候，建议用FC。