أفضل 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;

ملخص