5 práticas recomendadas para usar ganchos React na produção

Brevemente sobre os resultados da implementação de ganchos

Pontos fortes da implementação do gancho

• Melhorando a legibilidade do código. Isso é possível graças ao uso de árvores de componentes menores do que antes. A criação dessas árvores de componentes é facilitada pelo nosso desejo de abandonar propriedades de renderização e componentes de ordem superior.
• Melhorando os recursos de depuração de código. Tínhamos à nossa disposição uma representação visual aprimorada do código e informações adicionais de depuração fornecidas pelas ferramentas de desenvolvedor do React.
• Melhorando a modularidade do projeto. Devido à natureza funcional dos ganchos, o processo de criação e aplicação de lógica adequada para uso repetido foi simplificado.
• Separação de responsabilidades. Os componentes de reação são responsáveis ​​pela aparência dos elementos da interface e os ganchos fornecem acesso à lógica do programa encapsulado.

1. Recupere oportunamente os ganchos dos componentes e crie ganchos personalizados

1. Os componentes são menores do que os ganchos comuns.
2. Os ganchos podem ser reutilizados em vários componentes.
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. Sobre os benefícios do 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. A combinação e composição de ganchos

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

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

4. Comparação de React.useReducer e 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. Implementação gradual de ganchos

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;

Sumário