React Hooks实战_性能优化

最近在做react项目的迁移，从class组件写法迁移至function组件，不得不说hooks的特性对整个代码逻辑复用性的提高还是很不错的。但是新手在接触hooks的时候，如果不了解各个API的特性的话，同样也会埋下许多神坑，后期优化费时费力。

要解决性能问题，关键在于对组件重复渲染的处理，魔鬼在细节，下面就来通过两个常见的案例来分析性能到底会毁在哪几个细节，并且渐进式地给出优化方案。

组件状态管理混乱

const ShowUp = () => {
   
    const [tabVisible, setTabVisible] = useState(false);
    const [dataSource, setDataSource] = useState([]);
        const [countdown, setCountdown] = useState(0)
    ...
    
    const countdownHandler = () => {
   
      if (countdown === 10) return
        setTimeout(() => {
   
        setCountdown(countdown +