5 Best Practices für die Verwendung von React Hooks in der Produktion

Kurz über die Ergebnisse der Implementierung von Hooks

Stärken der Hook-Implementierung

• Verbesserung der Lesbarkeit von Code. Dies ist möglich durch die Verwendung kleinerer Komponentenbäume als zuvor. Die Erstellung solcher Komponentenbäume wird durch unseren Wunsch erleichtert, Rendering-Eigenschaften und Komponenten höherer Ordnung aufzugeben.
• Verbesserung der Code-Debugging-Funktionen. Wir verfügten über eine verbesserte visuelle Darstellung des Codes und zusätzliche Debugging-Informationen, die von den React-Entwicklertools bereitgestellt wurden.
• Verbesserung der Modularität des Projekts. Aufgrund der Funktionsweise von Hooks wurde das Erstellen und Anwenden von Logik, die für die wiederholte Verwendung geeignet ist, vereinfacht.
• Aufgabentrennung. Reaktionskomponenten sind für das Erscheinungsbild der Schnittstellenelemente verantwortlich, und Hooks bieten Zugriff auf die gekapselte Programmlogik.

1. Rufen Sie Hooks rechtzeitig von Komponenten ab und erstellen Sie benutzerdefinierte Hooks

1. Komponenten sind kleiner als bei normalen Haken.
2. Haken können in verschiedenen Komponenten wiederverwendet werden.
3. , React, , . , State<StateName> State. React.useState, .

//  

function Component() {
    const [selected, setSelected] = React.useState()
    const select = React.useCallback(id => setSelected(/** ... */), [
        selected,
        setSelect
    ])

    return <List selectedIds={selected} onSelect={id => select(id)} />
}

//   

const useSelection = () => {
    const [selected, setSelected] = React.useState()
    const select = React.useCallback(id => setSelected(/** ... */), [
        selected,
        setSelect
    ])

    return [selected, select]
}

function Component() {
    const [selected, select] = useSelection()

    return <List selectedIds={selected} onSelect={id => select(id)} />
}

2. Über die Vorteile von React.useDebugValue

export default function useFeatureToggle(flagName, flagVariation = true) {
    const flags = React.useContext(FlagsContext)
    const isFeatureEnabled = getIsFeatureEnabled(flagName, flagVariation)(flags)

    React.useDebugValue({
        flagName,
        flagVariation,
        isEnabled: isFeatureEnabled
    })

    return isFeatureEnabled
}

3. Die Kombination und Zusammensetzung der Haken

function OrderCreate() {
    const {
        orderCreater,
        orderFetcher,
        applicationContext,
        goToNextStep,
        pendingOrder,
        updatePendingChanges,
        revertPendingChanges
    } = useOrderCreate()

    return (/** ...children */)
}

4. Vergleich von React.useReducer und React.useState

const initialState = 0;
const reducer = (state, action) => {
    switch (action) {
        case 'increment': return state + 1;
        case 'decrement': return state - 1;
        case 'reset': return 0;
        default: throw new Error('Unexpected action');
    }
};

function Component() {
    const [count, dispatch] = React.useReducer(reducer, initialState);

    return (
        <div>
            {count}
            <button onClick={() => dispatch('increment')}>+1</button>
            <button onClick={() => dispatch('decrement')}>-1</button>
            <button onClick={() => dispatch('reset')}>reset</button>
        </div>
    );
};

const CounterActionTypes = {
    Increment: 'increment',
    Decrement: 'decrement',
    Reset: 'reset',
}

const useCounterReducer = (initialState) => {
    const [count, dispatch] = React.useReducer(reducer, initialState);

    const increment = React.useCallback(() => dispatch(CounterActionTypes.Increment));
    const decrement = React.useCallback(() => dispatch(CounterActionTypes.Decrement));
    const reset = React.useCallback(() => dispatch(CounterActionTypes.Reset));

    return {
        count,
        increment,
        decrement
    }
}

function Component() {
    const {count, increment} = useCounterReducer(0);

    return (
        <div>
            {count}
            <button onClick={increment}>+1</button>
        </div>
    );
};

5. Allmähliche Implementierung von Haken

export const injectTracking = (propName = 'tracking') => WrappedComponent => {
    const WithTracking = props => {
        const tracking = useTracking();

        const trackingProp = {
            [propName]: tracking,
        };

        return <WrappedComponent {...props} {...trackingProp} />;
    };

    WithTracking.displayName = wrapDisplayName(WrappedComponent, 'withTracking');

    return WithTracking;
};

export default injectTracking;

Zusammenfassung