Reactを使わずにCSSクラスを追加すると反応が遅くなります

Question

私のプロジェクトにはテーブルがあり、各行には独自のクラスがあります。 また、私は水平のスクロールを行うときにいくつかの列が固定されているので、スティックの列を持っています。

私の問題は、いくつかの状態が変更されているときに（例えば。noneからrejectedに）私はrejectedクラス名としてこの行をマークし、背景色を変更する必要があるということです。

setStateを使用すると、行全体が再レンダリングされ、スティッキー列がなくなるため問題があります（scrollイベントごとに計算します）。

質問があります：私の行を再レンダリングせずに反応classNameを変更する他の解決策がありますか？ （jQuery以外）

Answer 1

ええ、解決策が見つかりました。 行の各セルにはそれぞれ独自のコンポーネントがあります。あなたが知っているように配列から作成している各要素はkey propを持つ必要があります。

return (
    <tr> 
    {cells.map(cell => (<td key={_.uniqueId()}>{cell.val}</td>)) 
    </tr> 
) 

私はlodashの_.uniqueId()値を渡すことに使用される - これが私の問題を引き起こしていました。 解決策は、この一意のIDをいくつかのuniqe文字列に置き換えることでした。私の場合は、2つのIDと列名の組み合わせです。

だから、最終的な解決策は、次のようになります。ここでは

return (
    <tr> 
    {cells.map(cell => { 
     const keyId = `${row.id}${cell.id}${cell.name}` 
     return (<td key={keyId}>{cell.val}</td>}) 
    }} 
    </tr> 
) 

それは破壊し、再び再レンダリングされた理由の説明です： https://facebook.github.io/react/docs/multiple-components.html#dynamic-children

Answer 2

クラスが更新されるように、Rowコンポーネントの状態を変更します。次に、子コンポーネントにPureComponent（https://github.com/facebook/react/pull/7195）を使用して、自分の小道具が変更されない限り再レンダリングしないようにします。それはあなたの問題を解決しますか？