So machen Sie Ihre React-Anwendung schneller rendern

Nov 27 2022

Das schnelle Bereitstellen von Anwendungen ist einfach, das Bereitstellen schneller Anwendungen ist so viel schwieriger. Hier einige Tipps, damit Ihre Reaktionsanwendung Ihre Komponenten schneller rendert.

Das schnelle Bereitstellen von Anwendungen ist einfach, das Bereitstellen schneller Anwendungen ist so viel schwieriger. Hier einige Tipps, damit Ihre Reaktionsanwendung Ihre Komponenten schneller rendert.

Während wir versuchen, unsere Anwendungen schneller bereitzustellen, haben wir oft vergessen, uns auf Best Practices zu konzentrieren. Nach einer Weile erstellen wir Komponenten, die so komplex sind, sobald Sie eine Schlüsselstelle eingeben, die nicht gerendert werden muss. Hier die Liste, was zu tun und was nicht zu tun ist.

Verwenden Sie React.Memo

Normalerweise möchten wir nicht, dass unsere Komponente jedes Mal gerendert wird, wenn ihr übergeordnetes Element gerendert wird. Wir können React sagen, um unsere Komponenten nicht zu rendern, wenn es nicht nötig ist.

// Wrong usage
// Without React.memo this component will get rendered each time 
// something causes its parent to render
const YourHeavyComponent = (name, title, onClick) => {
    // Render  something really heavy like whole page here
}

export default YourHeavyComponent
// Good usage
// This component will not render unless name, title or onClick changes
const YourHeavyComponent = (name, title, onClick) => {
    // Render  something really heavy like whole page here
}

export default React.memo(YourHeavyComponent)
// This component will not render unless title changes
const YourHeavyComponent = (name, title, onClick) => {
    // Render  something really heavy like whole page here
}

// This usage might better for some stations, use this second argument
// to specify which props  will cause render
export default React.memo(YourHeavyComponent, (prevProps, nextProps) => {
    return prevProps.title === nextProps.title
})

Haben Sie nicht mehr als 4 Requisiten pro Komponente

Viele Requisiten zu haben ist immer problematisch, jede Requisite bedeutet eine weitere zu berücksichtigende Variable, wenn es um die Leistung geht, und es wird Ihren Code schwieriger zu lesen und zu warten. Anstatt Komponenten mit 10 Requisiten zu erstellen, erstellen Sie 3 kleinere Chunks mit 3–4 Requisiten.

// this component has too many filters
// it's not a good idea to add filters inside this component
// instead we need to create a seperate component to add filter inputs
// and we can also remove title from here
const List = (title, items, sortBy, keys, filters, onFilterChange, children, pagination) => {
    // Render  something really heavy like whole page here
}
// here userslist wont rendered unless we get a new list
// pagination payload won't cause rendering in filters
const [payload, setPayload] = useState()
const [list, setList] = useState([])
return <>
    <Filters onFilterChange={setPayload} filters={payload.filters} />
    <UserList items={list}/>
    <Pagination onPaginationChange={setPayload} pagination={payload.pagination} />
</>

Haken, wenn Sie Variablen haben, die berechnet werden, nachdem sich etwas geändert hat. Es ist hilfreich, denn wenn Ihre Berechnung Zeit in Anspruch nimmt oder Sie nach der Berechnung unterschiedliche Speicherreferenzen für Arrays oder Objekte erhalten.

Bitte vergessen Sie nicht, wenn Ihre Variablen geändert werden und Sie sie an Kinder übergeben, wird die Kinderkomponente neu gerendert.

// here we use useMemo for purely caching purposes, if we don't use useMemo
// each time this components rendered the calculation will have to re-run 
const heavyCalculated = useMemo(() => doSomeHeavyCalculation(variable1), [variable])
// an example of wrong usage
// each time this components get rendered this
// styles variable will point to different memory address
// and this will cause rerender of YourHeavyComponent
const styles = {
  container:{
    marginLeft: left,
    marginRight: right,
    marginTop: top,
    marginBottom: bottom,
  }
}
// correct usage of useMemo
// this will cache your value and its memory point won't change
// so even if this components gets rendered your YourHeavyComponent won't be rendered again
const styles = useMemo(() => ({
  container:{
    marginLeft: left,
    marginRight: right,
    marginTop: top,
    marginBottom: bottom,
  }
}), [left, right, top, bottom])

Sie müssen den useCallback-Hook verwenden, wenn Sie Ihre Funktion an eine untergeordnete Komponente übergeben. Vergessen Sie nicht, dass Funktionen jedes Mal, wenn Ihre Komponenten gerendert werden, auf einen anderen Speicherpunkt verweisen. Wir müssen den vorherigen Rückruf im Speicher halten, damit er sich nicht jedes Mal ändert, wenn wir etwas in der Hauptkomponente tun und das Rendering in den untergeordneten Elementen verursachen.

// wrong usage
// each time App components get rendered for some reason
// onClickCallback will be recreated and it will point to different memory address
// so it will cause YourHeavyComponent to re render
const onClickCallback = () => {
  // do some stuff
}

return <div>
  <YourHeavyComponent onClick={onClickCallback} />
</div>

// good usage of onClickCallback
// each time App components if your variable1 don't change
// onClickCallback will point to same memory point 
// so UourHeavyCallback won't render.
const onClickCallback = () => {
  // do some stuff
}

return <div>
  <YourHeavyComponent onClick={onClickCallback} />
</div>

Wir haben uns daran gewöhnt, diesen Hook zu verwenden, um ihn an Kinder weiterzugeben und ihre Instanzen zu verwenden, aber dieser nicht nur verfügbare Anwendungsfall ist dafür verfügbar. Wir können es als eine Art Caching- und Zustandsmechanismus verwenden, ohne ein erneutes Rendern zu verursachen.

// in this example we look for useRef value instead of setting
// sent reference is being used for checking if we send this message before or not
// this could hold in the state but if we put into state it will cause render
// it into state, because we don't want to re-render after we set sent.current
const sent = useRef(false)
const postMessage = useCallback(() => {
  if (!sent.current) {
    // make your api call here
    sent.current = true
  }
}, [])

Vergessen Sie dies nie, jedes Mal, wenn Sie Komponenten rendern, zeigen die Variablen in dieser Komponente auf die andere Speicheradresse. Wenn es um die primitiven Typen wie String und Integer geht, verursacht dies keine Probleme, aber wenn Sie mit Arrays, Objekten und Funktionen arbeiten (weil jede Funktion tatsächlich Objekte hinter der Haube sind). Sehen wir uns einige Beispiele an

const InlineTest = () => {
    // the usage below will cause YourHeavyComponent to render if
    // something causes InlineTest component to render
    return <YourHeavyComponent style={{
        marginLeft: 10,
        marginRight: 10
    }} />
}
const style = {
    marginLeft: 10,
    marginRight: 10
}

// We move styles outside of component
// this way style will point the same memory address regardless of 
// how many tames InlineTest gets rendered

const InlineTest = () => {
    // the usage below will cause YourHeavyComponent to render if
    // something causes InlineTest component to render
    return <YourHeavyComponent style={style} />
}

const InlineTest = () => {
    // the usage below will cause YourHeavyComponent to render if
    // something causes InlineTest component to render
    // because onClick will be assigned to a new function each time
    return <YourHeavyComponent onClick={() => {
        console.log('clicked');
    }} />;
}
import {useCallback} from "react";

const InlineTest = () => {
    // the usage below is correct way to do it
    // using useCallback will make sure onClick function
    // is the same between renders and it won't cause render in below component
    
    const onClick = useCallback(() => {
        console.log('clicked');
    }, [])
    return <YourHeavyComponent onClick={onClick} />;
}

Sie denken vielleicht, dass der Umgang mit Formularen in Reaktion einfach ist, aber ich garantiere Ihnen, dass dies nicht der Fall ist. Wenn Ihre Formulare kompliziert werden und Sie einige Validierungen usw. durchführen müssen, verursachen Sie zu viele Renderings. Deshalb ist es wichtig, eine gute Bibliothek zu verwenden. In den letzten Jahren habe ich viele verschiedene Bibliotheken ausprobiert, aber es gibt nur eine, die es wert ist, hier erwähnt zu werden; Reaktionshakenform.