Πώς να ενημερώσετε textContent του div χρήση ενός διαιτητή στο React και την αποφυγή καθιστούν (για την απόδοση), όταν οι ενημερώσεις εξαρτώνται από στηρίγματα;

ψήφοι
0

Έχω ένα συστατικό που ονομάζεται Parentότι στην componentDidMountανοίγει μια σύνδεση WebSocket και συνεχώς λαμβάνει δεδομένα κάθε 100ms. Όταν λαμβάνει αυτά τα στοιχεία, που χρησιμοποιεί setStateγια να ενημερώσετε κατάσταση με τα νέα δεδομένα, η οποία είναι μια σειρά από αντικείμενα. Τα αντικείμενα αντιπροσωπεύουν σειρές σε ένα πίνακα, που έχει πλήκτρα για κάθε στήλη.

Στη μέθοδο καθιστούν, Parentκαθιστά ένα Childγια κάθε αντικείμενο στη συστοιχία, περνώντας στο αντικείμενο όπως προπ.

Η Childκαθιστά τα κύτταρα (κάθε κύτταρο είναι ένα div) για κάθε πλήκτρο του πέρασε σε αντικείμενο προπ. Ωστόσο, για λόγους απόδοσης, η υπόθεση μου είναι ότι είναι πιο γρήγορα για το Childνα δημιουργήσει μια διαιτητής κάθε κύτταρο, και όταν τα νέα στηρίγματα έρχονται, ακριβώς για να αλλάξετε το textContentκάθε κύτταρο με τη νέα τιμή.

shouldComponentUpdateΩς εκ τούτου, επιστρέφει false στο Child, έτσι δεν αντιδρούν καθιστά συμβεί μετά την αρχική παρέχουν. Οι ενημερώσεις όλα συμβαίνουν στο componentWillReceiveProps. Το πρόβλημα είναι ότι δεν είστε υποτίθεται για να χρησιμοποιήσετε αυτήν τη μέθοδο του κύκλου ζωής πια. Ποια είναι η εναλλακτική λύση εδώ;

Κώδικας

// Parent
import React from 'react';
import { connectViaWebsocket } from '../../api/connectViaWebsocket';
import { LoadingSpinner } from '../spinners/LoadingSpinner';
import styled from 'react-emotion';

interface ParentData {
  col1: number;
  col2: number;
  col3: number;
  col4: number;
}

interface State {
  data: ParentData[];
  isConnected: boolean;
}

export class Parent extends React.Component<{}, State> {
  constructor(props: {}) {
    super(props);
    this.state = { data: [], isConnected: false };
  }

  public componentDidMount() {
    connectViaWebsocket(data => this.setState({ isConnected: true, data: JSON.parse(data) }));
  }

  public render() {
    return this.state.isConnected ? (
      <Container>
        {this.state.data.map((row, index) => (
          <Child
            key={index}
            col1={row.col1}
            col2={row.col2}
            col3={row.col3}
            col4={row.col4}
          />
        ))}
      </Container>
    ) : (
      <LoadingSpinner showSpinner={false} text={'Connecting...'} />
    );
  }
}

const Container = styled('div')`
  background-color: white;
  height: 100%;
  font-size: 0.8em;
`;
import React from 'react';
import styled from 'react-emotion';

interface Props {
  col1: number;
  col2: number;
  col3: number;
  col4: number;
}

type ChildCellRefs = { [key: string]: React.RefObject<HTMLElement> };
export class Child extends React.Component<Props> {
  private cellRefs: ChildCellRefs = {
    col1: React.createRef<HTMLDivElement>(),
    col2: React.createRef<HTMLDivElement>(),
    col3: React.createRef<HTMLDivElement>(),
    col4: React.createRef<HTMLDivElement>(),
  };

  public componentDidMount() {
    this.update();
  }

  public shouldComponentUpdate() {
    return false;
  }

  public componentWillReceiveProps(nextProps {
    this.update(nextProps);
  }

  private update(data: Props) {
    this.fillData(data);
  }

  private fillData(data: Props) {
    Object.keys(this.cellRefs).forEach(key => {
      const dataKey = key;
      const cell = this.cellRefs[dataKey].current;
      const dataValue = `${data[dataKey]}`;
      if (cell) {
        if (cell.textContent !== dataValue) {
          cell.textContent = dataValue;
        }
      }
    });
  }

  public render() {
    return (
      <Row>
        <DataCellsContainer>
          <DataCell innerRef={this.cellRefs.col1} />
          <DataCell innerRef={this.cellRefs.col2} />
          <DataCell innerRef={this.cellRefs.col3} />
          <DataCell innerRef={this.cellRefs.col4} />
        </DataCellsContainer>
      </Row>
    );
  }
}
Δημοσιεύθηκε 09/10/2019 στις 18:59
πηγή χρήστη
Σε άλλες γλώσσες...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more