react性能优化之scu，purecomponent, memo

影响react性能的很重要的一个因素还有scu，也就是shouldcomponentupdate生命周期，在这里可以判断这个组件是否应该更新，最好都使用purecomponent，因为purecomponent会默认做一次浅比较。

代码如下
list.jsx

import React from 'react';
import { List, Avatar, Button, Input } from 'antd';
import Bottom from './bottom.jsx';

export default (props) => {
    const { data, deleteItem } = props;
    return (
        <div>
            <List
                itemLayout="horizontal"
                dataSource={data}
                renderItem={item => (
                <List.Item>
                    <List.Item.Meta
                    avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                    title={<div>
                        {item.title}
                            <Input />
                            <Button 
                                type="primary" 
                                danger 
                                style={{marginLeft: '5px'}}
                                onClick={() => deleteItem(item)}
                                >
                                删除
                            </Button>
                        </div>}
                    description="Ant Design, a design language for background applications, is refined by Ant UED Team"
                    />
                </List.Item>
                )}
            />
            <Bottom />
        </div>
    )
}

bottom.jsx

import React from 'react';

class Common extends React.PureComponent {
    state = {
    };
    componentDidMount() {
        console.log('bottom组件又进入到didmount了')
    }
    render() {
        console.log('我是bottom组件，我有渲染了')
        return (
            <>
                <h2>
                    我是tab的底部
                </h2>
            </>
        )
    }
}

export default Common;

在不使用purecomponent优化之前，点击删除，bottom会重新渲染
组件结构是 list是父组件，子组件是bottom

在使用了purecomponent之后，点击删除，bottom不会重新渲染

如果有更多的数据，更深的数据结构，可以采用深比较
但是深比较会非常耗费性能
这时候可以考虑ImmutableJS来优化，
ImmutableJS每次操作都会产生一个新的对象出来，由于它会复用之前数据的数据结构，所以产生新的数据也很快。
对于hook组件来说，使用React.memo来代替purecomponent进行优化渲染