我想在render前加载图片放在state里面，然后再render，但是render依然慢

Question

componentWillMount() {
        const _self = this;
        var qs = (location.search.length>0?location.search.substring(1):"");
        var args = {};
        var items = qs.length?qs.split("&"):[];
        var item = null;
        var name = null;
        var value = null;

        var len = items.length;
        for (var i = 0; i < len; i++) {
            item = items[i].split("=");
            name = decodeURIComponent(item[0]);
            value = decodeURIComponent(item[1]);
            if (name.length) {
                args[name] = value;
            }
        }
        let keyValue = args['key'];

        console.log('渲染开始之前 == ', keyValue)

        _self.setState({
            //url: 'http://static.kube.univer'+keyValue,
        })
    }

<div
                        className={'image_describe'}
                    >
                        <div className={'image_describe_information'}>
                            <div>图片尺寸</div>
                            <div
                            >{image}</div>
                        </div>
                    </div>

Answer 1

加载图片的速度主要看网速。
还有永远不要在componentWillMount里调用setState

Answer 2

render依然慢是什么意思？ 你是怎么感知到慢的。 另外不建议这种方式去预先加载资源，方式有很多。 你可以去网上搜，很多的。

再者就是你非要这么做，那还是建议你把代码放到componentDidMount或者在setState的时候判断下当前组件是否已经正常挂载（mounted）

Answer 3

姿势不对啊，

Answer 4

componentWillMount已经在16.3版本开始要废弃了。
虽然你在render前设置了state,但依然是url，并没有将图片数据放在state中，而在render中依然要通过网络加载图片。
那么你可以使用load-lazy组件。这样效果会好很多。