【React.js】之性能优化

React 性能优化

SCU 默认返回true, 即 React 默认重新渲染所有组件

必须配合 “不可变值” 一起使用

可先不用SCU, 有性能问题时再考虑使用

ShouldComponentUpdate

shouldComponentUpdate(nextProps, nextState) {
  if(nextState.count !== this.state.count) {
     return true // 可以渲染 
  }
  return false // 不重复渲染
}

代码案例1：性能优化Footer组件

import React from 'react'
import PropTypes from 'prop-types'

class Input extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            title: ''
        }
    }
    render() {
        return <div>
            <input value={this.state.title} onChange={this.onTitleChange} />
            <button onClick={this.onSubmit}>提交</button>
        </div>
    }
    onTitleChange = (e) => {
        this.setState({
            title: e.target.value
        })
    }
    onSubmit = () => {
        const { submitTitle } = this.props
        submitTitle(this.state.title) // 'abc'

        this.setState({
            title: ''
        })
    }
}
// props 类型检查
Input.propTypes = {
    submitTitle: PropTypes.func.isRequired
}

class List extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        const { list } = this.props

        return <ul>{list.map((item, index) => {
            return <li key={item.id}>
                <span>{item.title}</span>
            </li>
        })}</ul>
    }
}
// props 类型检查
List.propTypes = {
    list: PropTypes.arrayOf(PropTypes.object).isRequired
}


class TodoListDemo extends React.Component {
    constructor(props) {
        super(props)
        // 状态（数据）提升
        this.state = {
            list: [
                {
                    id: 'id-1',
                    title: '标题1'
                },
                {
                    id: 'id-2',
                    title: '标题2'
                },
                {
                    id: 'id-3',
                    title: '标题3'
                }
            ],
            footerInfo: '底部文字'
        }
    }
    render() {
        return <div>
            <Input submitTitle={this.onSubmitTitle} />
            <List list={this.state.list} />
            <Footer text={this.state.footerInfo} length={this.state.list.length}></Footer>
        </div>
    }
    onSubmitTitle = (title) => {
        this.setState({
            list: this.state.list.concat({
                id: `id-${Date.now()}`,
                title
            })
        })
    }
}

class Footer extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return <p>
            {this.props.text}
            {this.props.length}
        </p>
    }

    // 生命周期
    componentDidUpdate() {
        console.log('footer did update====')
    }

    shouldComponentUpdate(nextProps, nextState) {
        if(nextProps.text !== this.props.text
         || nextProps.length !== this.props.length) {
            return true // 可以渲染
        }
        return false // 不重复渲染
    }
    // React 默认: 父组件有更新，子组件则无条件也更新
    // 性能优化对于 React 更加重要
    // SCU 一定要每次都用吗
}
export default TodoListDemo

代码案例2：性能优化List组件

import React from 'react'
import PropTypes from 'prop-types'
import _ from 'lodash'

class Input extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            title: ''
        }
    }
    render() {
        return <div>
            <input value={this.state.title} onChange={this.onTitleChange} />
            <button onClick={this.onSubmit}>提交</button>
        </div>
    }
    onTitleChange = (e) => {
        this.setState({
            title: e.target.value
        })
    }
    onSubmit = () => {
        const { submitTitle } = this.props
        submitTitle(this.state.title) // 'abc'

        this.setState({
            title: ''
        })
    }
}
// props 类型检查
Input.propTypes = {
    submitTitle: PropTypes.func.isRequired
}

class List extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        const { list } = this.props

        return <ul>{list.map((item, index) => {
            return <li key={item.id}>
                <span>{item.title}</span>
            </li>
        })}</ul>
    }
    shouldComponentUpdate(nextProps, nextState){
        // _.isEqual 做对象或者数组的深度比较(一次性递归到底)
        if(_.isEqual(nextProps.list, this.props.list)){
            // 相等，则不重复渲染
            return false
        }
        return true // 不相等，则渲染

    }
}
// props 类型检查
List.propTypes = {
    list: PropTypes.arrayOf(PropTypes.object).isRequired
}


class TodoListDemo extends React.Component {
    constructor(props) {
        super(props)
        // 状态（数据）提升
        this.state = {
            list: [
                {
                    id: 'id-1',
                    title: '标题1'
                },
                {
                    id: 'id-2',
                    title: '标题2'
                },
                {
                    id: 'id-3',
                    title: '标题3'
                }
            ],
            footerInfo: '底部文字'
        }
    }
    render() {
        return <div>
            <Input submitTitle={this.onSubmitTitle} />
            <List list={this.state.list} />
        </div>
    }
    onSubmitTitle = (title) => {
        this.setState({
            list: this.state.list.concat({
                id: `id-${Date.now()}`,
                title
            })
        })
    }
}

export default TodoListDemo

PureComponent 和 memo

• PureComponent, SCU 中实现了浅比较
• memo, 函数组件中的 PureComponent
• 浅比较已使用大部分情况(尽量不要做深度比较)

immutable.js

• 彻底拥抱“不可变值”
• 基于共享数据（不是深拷贝），速度好
• 有一定学习和迁移成本，按需使用