React项目中，一段代码求优化

Question

import React from 'react';
import ReactDOM from 'react-dom';
import './assets/styles/index.less';

import Green from './assets/images/green.png';
import Red from './assets/images/red.png';

class Circle extends React.Component {

    constructor() {
        super();
        this.state = {
            safety: []
        }
    }

    render() {

        const _self = this;

        //console.log('_self.props.styleSet =', _self.props.styleSet)
        let divStyle = {
            //
        }

        let safetyData = {};



        if(this.state.safety.length !== 0) {
            this.state.safety.map(function (item) {
                safetyData[item['name']] = item['value']
            })
        }



        let cI = Red


        return (
                <div
                    ref={(elem) => { this.element = elem; }}
                    className={'safety_div'}
                >
                    <div className={'safety_title'}>
                        <div className={'item item1'}>已处理漏洞数</div>
                        <div className={'item item2'}>基线配置不当数</div>
                        <div className={'item item3'}>暴力破解数</div>
                        <div className={'item item4'}>弱口令数</div>
                    </div>


                    <div className={'safety_img'}>
                        <div
                            className={'item item1'}
                        >
                            <img src={safetyData['handle'] === 0?Red:Green} />
                        </div>
                        <div
                            className={'item item1'}
                        >
                            <img src={safetyData['configuration'] === 0?Red:Green} />
                        </div>
                        <div
                            className={'item item1'}
                        >
                            <img src={safetyData['violentBreak'] === 0?Red:Green} />
                        </div>
                        <div
                            className={'item item1'}
                        >
                            <img src={safetyData['weakPassword'] === 0?Red:Green} />
                        </div>
                    </div>

                    <div className={'safety_figure'}>
                        <div
                            className={'item item1'}
                            style = {{
                                color: safetyData['handle'] === 0?'#FF2366':'#2AF4FF'
                            }}
                        >
                            {safetyData['handle']}
                        </div>
                        <div
                            className={'item item2'}
                            style = {{
                                color: safetyData['configuration'] === 0?'#FF2366':'#2AF4FF'
                            }}
                        >
                            {safetyData['configuration']}
                        </div>
                        <div
                            className={'item item3'}
                            style = {{
                                color: safetyData['violentBreak'] === 0?'#FF2366':'#2AF4FF'
                            }}
                        >
                            {safetyData['violentBreak']}
                        </div>
                        <div
                            className={'item item4'}
                            style = {{
                                color: safetyData['weakPassword'] === 0?'#FF2366':'#2AF4FF'
                            }}
                        >
                            {safetyData['weakPassword']}
                        </div>
                    </div>

                </div>

        )
    }

    componentDidMount() {
        //
    }

    componentWillReceiveProps(nextProps) {  // 接收新的参数
        //console.log(nextProps.data);
        this.setState({
            safety: nextProps.safety
        });
    }

    componentDidUpdate() {
        //
    }
}


export default Circle;

Answer 1

你大概需要优化那些重复的div吧.

<div className={'safety_img'}>
{
    safetyData.map(item => {
        return(
            <div className={'item item1'} key={item}>
                <img src={item === 0?Red:Green} />
            </div>
        );
    })
}
</div>

<div className={'safety_figure'}>
    {
        safetyData.map((item, i) => {
            return(
                <div className={`item item${i+1}`}
                   style = {{color: item === 0?'#FF2366':'#2AF4FF'}}>
                     {item}
                </div>
            );
        })
    }
</div>

Answer 2

优化点:

1. 组件使用Array.map方法优化，
2. componentReciveProps 这个不需要
3. 在render中减少计算,使用react 计算属性写法

比如:

if(this.state.safety.length !== 0) {
            this.state.safety.map(function (item) {
                safetyData[item['name']] = item['value']
            })
        }

可更改为

get computedSafetyDate() {
    ...
    }

1. 减少组件无谓的更新判断
2. 减少组件内部使用bind, 箭头函数(因为这些在js中会重新重建一个函数，降低性能)

暂时就这么多了