React Hook 四种组件优化总结

目录

• 前言
• 组件抽取
• memo 优化组件
• React.memo 语法
• useCallback 优化组件
• useCallback 作用
• useMemo 优化
• useMemo 语法
• useCallback 和 useMemo 区别

前言

React Hook 已成为当前最流行的开发范式，React 16.8 以后基于 Hook 开发极大简化开发者效率，同时不正确的使用 React Hook也带来了很多的性能问题，本文梳理基于 React Hook 开发组件的过程中如何提高性能。

组件抽取

优化前

每次点击 Increase 都会引起子组件 Child 的渲染，哪怕子组件并没有状态变化

function Before(){
    console.log('Demo1 Parent')
    let [count,setCount] = useState(0)
    let [name,setName] = useState('-')
    const handleClick = ()=>{
        setCount(count+1)
    }
    const handleInput = (e)=>{
        setName(e.target.value)
    }
    return (
        

            
                计数器：
                {count}
                Increase
            
            
                改变子组件：
                
            

                                  

    ) } // 子组件 function Child(props){     console.log('Demo1 Child')     return (                      子组件渲染：{props.name}         

    ) }

优化后

只需要把 Increase 抽取成独立的组件即可。此时点击按钮，子组件并不会渲染。

/**
 * 优化后，Increase提取以后，上下文发生变化，组件内
 * @returns 
 */
function Increase(){
    console.log('Child Increase')
    let [count,setCount] = useState(0)
    const handleClick = ()=>{
        setCount(count+1)
    }
    return (
        

            
                计数器：
                {count}
                Increase
            
        

    ) } function After(){     console.log('Demo1 Parent')     let [name,setName] = useState('-')     const handleInput = (e)=>{         setName(e.target.value)     }     return (         

                                          改变子组件：