React优化--函数式组件

react优化

• connect

利用的是pureComponent，注意props的比较是浅比较

函数式组件

• 了解函数式组件

优点：
1 组件不会被实例化,整体渲染性能得到提升

缺点：
1 没有this
2 没有生命周期
3 没有state
4 因为没有实例话，所有不支持ref


因为没有生命周期，无法使用shouldComponet进行优化
一旦父组件setState，那么子组件也要重新渲染

• 函数组件缺点

const Child = (props) => {
    return <div>{props.name}</div>
}

class Welcome extends React.Component {
     
    state = {
        name: 'hi'
    }
    handleClick = () => {
        this.setState({name: 'new'})
    }
    render() {
        return (
            <h1 onClick={this.handleClick}>button</h1>
            <Child name={this.state.name}>
        );
    }
}

每次点击触发父组件更新state，导致函数组件也要执行更新，即使name没有变化

• 解决办法React.memo

const Child = (props) => {
    return <section>那一夜{props.name}真美</section>
}

export default React.memo(Child)


经过memo包裹后，如果函数组件props没有改变，就不会更新执行


// 手动判断
React.memo(C, (nextProps, prevProps) => {
    // 返回true不更新，false更新
    return nextProps.name === preProps.name
})

• props传入函数的问题

export default () =>  {
    change = () => {
        console.log(1)
    }
    render() {
        return (
            <Child change={this.change}> //每次都会产生新的change函数
        );
    }
}

因为Child传入的是个函数，所以每次执行的时候，就重新执行，就会产生新的函数
var a = function(){}
var b = function(){}
a和b是一样的


这个时候也会导致多余的渲染

• props传入函数解决办法----函数定义在外部

const change = () => { console.log(1) }
export default () =>  {
    render() {
        return (
            <Child change={change}> //每次都会产生新的change函数
        );
    }
}


类组件：下面方法使用即可
handleClick = () => {}
<Button onClick={this.handleClick}>父亲组件</Button>

缺点，如果函数依赖props这种方法失效，所以有了useCallback

• useCallback解决函数依赖props问题

import React, { useState, useCallback } from 'react';
export default () => {
// 没有依赖，永远是同一个函数
const change = useCallback(() => {}, []);

// 依赖name，重新执行函数组件，name不变的，是同一个函数
// name变了change是新的函数
const change1 = useCallback(() => {}, [name]);
  return (
    <div>
      <Child change={change} />
    </div>
  )
}

参考文章：

• PureComponent的浅比较优化
  https://imweb.io/topic/598973c2c72aa8db35d2e291
• 浅比较优化的缺点以及解决办法
• https://github.com/SunShinewyf/issue-blog/issues/43