Question

我做了一个小项目来了解有关反应的更多信息，并注意到当窗口大小发生变化时视图响应非常差。

我觉得我必须做一些我不应该做的事情，而这正在创造这种繁琐的经历。

这是我的应用：

import ColourCard from "./components/colour-card";

const url = "https://raw.githubusercontent.com/mdn/data/master/css/syntaxes.json";

class App extends React.Component {

    constructor() {

        super();

        this.state = {
            error: null,
            colours: []
        };
    }

    componentDidMount() {

        fetch(url)
            .then( response => response.json() )
            .then( data => {

                let colours = data['named-color']['syntax'].split(' | ');

                colours = colours.filter((colour) => {

                    return !colour.includes('gray') && !colour.includes('transparent');
                });

                this.setState({ colours });

                let clipboard = new Clipboard('.js-copy');

                clipboard.on('success', function(e) {

                    const el = e.trigger.closest('.card').parentNode.getElementsByClassName('card-flash')[0];

                    el.getElementsByTagName('strong')[0].innerHTML = e.text;

                    el.classList.add('active');

                    setTimeout(() => el.classList.remove('active'), 1000);
                });
            })
            .catch( e => this.setState({ error: 'Ooops, error' }) )
    }

    render() {

        const { error, colours } = this.state;

        if ( error ) {

            return <div>{error}</div>
        }

        if ( !colours.length ) {

            return <div>Loading...</div>
        }

        return (

            <div className="grid">

                {colours.map((colour, index) => {

                    return <ColourCard colour={colour} key={index}></ColourCard>
                })}
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById("app"));

并且是我的卡组件：

class ColourCard extends React.Component {

    render() {

        const colour = tinycolor(this.props.colour);

        const style = {

            backgroundColor: colour.toHexString()
        };

        return (

            <div className="grid__item  size-6@m  size-4@l">

                <div className="card">

                    <div className="card__colour" style={style}></div>

                    <div className="card__meta">

                        <div className="card__meta-item  js-copy" data-clipboard-text={this.props.colour}>{this.props.colour}</div>

                        <div className="card__meta-item  js-copy" data-clipboard-text={colour.toHexString()}>{colour.toHexString()}</div>

                        <div className="card__meta-item  js-copy" data-clipboard-text={colour.toRgbString()}>{colour.toRgbString()}</div>

                        <div className="card__meta-item  js-copy" data-clipboard-text={colour.toHslString()}>{colour.toHslString()}</div>

                        <div className="card__meta-item  js-copy" data-clipboard-text={colour.toHsvString()}>{colour.toHsvString()}</div>

                    </div>

                </div>

                <div className="card-flash" style={style}>

                    <span className="card-flash__text">
                        <strong className="card-flash__strong"></strong>
                        <br />
                        Copied!
                    </span>

                </div>

            </div>
        );
    }
}

export default ColourCard;

https://codepen.io/matt3224/project/editor/ZvLGGA#

非常感谢任何帮助！

Answer 1

这整段代码：

            let clipboard = new Clipboard('.js-copy');

            clipboard.on('success', function(e) {

                const el = e.trigger.closest('.card').parentNode.getElementsByClassName('card-flash')[0];

                el.getElementsByTagName('strong')[0].innerHTML = e.text;

                el.classList.add('active');

                setTimeout(() => el.classList.remove('active'), 1000);
            });

你从不应该通过反应手动操作DOM。使用这个库时，这确实是一条黄金法则。这就像d3这样的库在做出反应时遇到问题的原因相同，因为它想要进入DOM。 React管理虚拟DOM，任何干扰都不好。它可能导致性能问题，一般来说，会破坏您的应用程序多次。

当窗口调整大小时，为什么我的小型React项目响应非常严重？

1 个答案: