उत्पादन में रिएक्ट हुक का उपयोग करने के लिए 5 सर्वोत्तम अभ्यास

हुक लागू करने के परिणामों के बारे में संक्षेप में

हुक कार्यान्वयन की ताकत

• कोड पठनीयता में सुधार। यह पहले की तुलना में छोटे घटक पेड़ों के उपयोग के लिए संभव है। इस तरह के घटक पेड़ों के निर्माण को प्रतिपादन गुणों और उच्च-क्रम के घटकों को छोड़ने की हमारी इच्छा से सुविधा होती है।
• कोड डिबगिंग क्षमताओं में सुधार। हमारे पास हमारे निपटान में कोड के एक बेहतर दृश्य प्रतिनिधित्व और रिएक्टर डेवलपर टूल द्वारा प्रदान की गई अतिरिक्त डिबगिंग जानकारी थी।
• परियोजना की प्रतिरूपकता में सुधार। हुक की कार्यात्मक प्रकृति के कारण, बार-बार उपयोग के लिए उपयुक्त तर्क बनाने और लागू करने की प्रक्रिया को सरल बनाया गया है।
• जिम्मेदारियों का अलग होना। रिएक्ट घटक इंटरफ़ेस तत्वों की उपस्थिति के लिए जिम्मेदार हैं, और हुक एन्कैप्सुलेटेड प्रोग्राम लॉजिक तक पहुंच प्रदान करते हैं।

1. समय पर घटकों से हुक निकालते हैं और कस्टम हुक बनाते हैं

1. नियमित हुक के मुकाबले घटक छोटे होते हैं।
2. विभिन्न घटकों में हुक का पुन: उपयोग किया जा सकता है।
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. 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. हुक का संयोजन और रचना

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

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

4. React.useReducer और 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. हुक का क्रमिक कार्यान्वयन

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;

सारांश