javascript - 为什么我的小型 React 项目在调整窗口大小时 react 很糟糕？

Question

我做了一个小项目来学习更多关于 React 的知识，并注意到当窗口大小改变时 View 响应非常差。

我觉得我一定是在某个地方做了一些我不应该做的事情，这造成了这种麻烦的体验。

这是我的应用程序:

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);
            });

你绝不应该用 React 手动操作 DOM。这确实是使用这个库时的一个黄金法则。这就是为什么像 d3 这样的库在 React 中遇到麻烦的原因是一样的，因为它想 Handlebars 伸进 DOM。 React 管理一个虚拟 DOM，任何对其的干扰都是不好的。它可能会导致性能问题，一般来说，它会多次破坏您的应用程序。