爲什麼窗口大小調整時，我的小React項目會非常糟糕？

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，任何干擾都不好。它可能會導致性能問題，並且一般而言，會使您的應用失敗的次數增加。