React Context: ஒரு விரிவான வழிகாட்டி

React Context என்பது, ஒவ்வொரு கூறு மரத்தின் மூலமாகவும் props-ஐ வெளிப்படையாக அனுப்பாமல் கூறுகளுக்கு இடையே தரவைப் பகிர உதவும் ஒரு சக்திவாய்ந்த அம்சமாகும். ஒரு குறிப்பிட்ட துணை மரத்தில் உள்ள அனைத்து கூறுகளுக்கும் சில மதிப்புகளைக் கிடைக்கச் செய்வதற்கான ஒரு வழியை இது வழங்குகிறது. இந்த வழிகாட்டி React Context-ஐ எப்போது, ​​எப்படிப் பயன்படுத்துவது, சிறந்த நடைமுறைகள் மற்றும் தவிர்க்க வேண்டிய பொதுவான தவறுகள் ஆகியவற்றை ஆராய்கிறது.

பிரச்சனையைப் புரிந்துகொள்வது: Prop Drilling

சிக்கலான React பயன்பாடுகளில், நீங்கள் “prop drilling” என்ற சிக்கலை எதிர்கொள்ளலாம். ஒரு பெற்றோர் கூறு ஒன்றிலிருந்து ஆழமாகப் பதிக்கப்பட்ட ஒரு குழந்தை கூறுக்கு தரவை அனுப்ப வேண்டியிருக்கும் போது இது நிகழ்கிறது. இதைச் செய்ய, தரவை ஒவ்வொரு இடைநிலை கூறு வழியாகவும் அனுப்ப வேண்டும், அந்தக் கூறுகள் தரவை தேவையில்லாததாக இருந்தாலும். இது பின்வருவனவற்றிற்கு வழிவகுக்கும்:

• குறியீடு குப்பை: இடைநிலை கூறுகள் தேவையற்ற props உடன் வீக்கமடைகின்றன.
• பராமரிப்பு சிரமங்கள்: ஒரு prop-ஐ மாற்றுவதற்கு பல கூறுகளை மாற்றியமைக்க வேண்டும்.
• படிக்கக்கூடிய தன்மை குறைந்தது: பயன்பாட்டின் மூலம் தரவின் ஓட்டத்தைப் புரிந்துகொள்வது கடினமாகிறது.

இந்த எளிமைப்படுத்தப்பட்ட உதாரணத்தைக் கவனியுங்கள்:

function App() {
  const user = { name: 'ஆலிஸ்', theme: 'dark' };
  return (
    <Layout user={user} />
  );
}

function Layout({ user }) {
  return (
    <Header user={user} />
  );
}

function Header({ user }) {
  return (
    <Navigation user={user} />
  );
}

function Navigation({ user }) {
  return (
    <Profile user={user} />
  );
}

function Profile({ user }) {
  return (
    <p>வரவேற்கிறோம், {user.name}!
Theme: {user.theme}</p>
  );
}

இந்த எடுத்துக்காட்டில், user பொருள் பல கூறுகள் வழியாக அனுப்பப்படுகிறது, Profile கூறு மட்டுமே அதை உண்மையில் பயன்படுத்துகிறது. இது prop drilling-ன் ஒரு உன்னதமான எடுத்துக்காட்டு.

React Context-ஐ அறிமுகப்படுத்துகிறது

props வழியாக வெளிப்படையாக அனுப்பாமல் ஒரு துணை மரத்தில் உள்ள எந்த கூறுக்கும் தரவை கிடைக்கச் செய்வதன் மூலம் prop drilling-ஐத் தவிர்க்க React Context ஒரு வழியை வழங்குகிறது. இது மூன்று முக்கிய பாகங்களைக் கொண்டுள்ளது:

• Context: நீங்கள் பகிர விரும்பும் தரவுக்கான கொள்கலன் இது. நீங்கள் React.createContext() பயன்படுத்துவதன் மூலம் ஒரு context-ஐ உருவாக்குகிறீர்கள்.
• Provider: இந்த கூறு context-க்கு தரவை வழங்குகிறது. Provider-ஆல் சூழப்பட்ட எந்த ஒரு கூறும் context தரவை அணுகலாம். Provider ஒரு value prop-ஐ ஏற்றுக்கொள்கிறது, இது நீங்கள் பகிர விரும்பும் தரவு ஆகும்.
• Consumer: (மரபு, குறைவாகப் பயன்படுத்தப்படுகிறது) இந்த கூறு context-க்கு குழுசேர்கிறது. context மதிப்பு மாறும் போதெல்லாம், Consumer மீண்டும் வழங்கும். Consumer context மதிப்பை அணுக ஒரு ரெண்டர் ப்ராப் செயல்பாட்டைப் பயன்படுத்துகிறது.
• useContext Hook: (நவீன அணுகுமுறை) இந்த hook ஒரு செயல்பாட்டு கூறுக்குள் நேரடியாக context மதிப்பை அணுக உங்களை அனுமதிக்கிறது.

React Context-ஐ எப்போது பயன்படுத்த வேண்டும்

React Context என்பது React கூறுகளின் மரத்திற்கு “உலகளாவியதாக”க் கருதப்படும் தரவைப் பகிர்வதற்குப் குறிப்பாகப் பயனுள்ளதாக இருக்கும். இதில் அடங்கும்:

• Theme: அனைத்து கூறுகளிலும் பயன்பாட்டின் தீம்-ஐப் பகிர்வது (எ.கா., ஒளி அல்லது டார்க் மோட்).
  எடுத்துக்காட்டு: ஒரு சர்வதேச இ-காமர்ஸ் தளம், அணுகல் மற்றும் காட்சி விருப்பங்களை மேம்படுத்த, ஒளி மற்றும் டார்க் தீம் இடையே மாற பயனர்களை அனுமதிக்கலாம். Context தற்போதைய தீம்-ஐ நிர்வகிக்கலாம் மற்றும் எல்லா கூறுகளுக்கும் வழங்கலாம்.
  
• பயனர் அங்கீகாரம்: தற்போதைய பயனரின் அங்கீகார நிலை மற்றும் சுயவிவர தகவலை வழங்குதல்.
  எடுத்துக்காட்டு: ஒரு உலகளாவிய செய்தி இணையதளம், உள்நுழைந்த பயனரின் தரவை (பயனர்பெயர், விருப்பத்தேர்வுகள் போன்றவை) நிர்வகிக்கவும், தளத்தில் கிடைக்கச் செய்யவும், தனிப்பயனாக்கப்பட்ட உள்ளடக்கம் மற்றும் அம்சங்களை இயக்கவும் Context-ஐப் பயன்படுத்தலாம்.
  
• மொழி விருப்பத்தேர்வுகள்: சர்வதேசமயமாக்கலுக்கான தற்போதைய மொழி அமைப்பைப் பகிர்வது (i18n).
  எடுத்துக்காட்டு: ஒரு பன்மொழி பயன்பாடு, தற்போது தேர்ந்தெடுக்கப்பட்ட மொழியைச் சேமிக்க Context-ஐப் பயன்படுத்தலாம். கூறுகள் சரியான மொழியில் உள்ளடக்கத்தைக் காண்பிக்க இந்த context-ஐ அணுகுகின்றன.
  
• API Client: API அழைப்புகளைச் செய்ய வேண்டிய கூறுகளுக்கு API கிளையன்ட் நிகழ்வை கிடைக்கச் செய்தல்.
• சோதனை கொடிகள் (அம்ச டாக்லஸ்): குறிப்பிட்ட பயனர்கள் அல்லது குழுக்களுக்கான அம்சங்களை இயக்குதல் அல்லது முடக்குதல்.
  எடுத்துக்காட்டு: ஒரு சர்வதேச மென்பொருள் நிறுவனம், தங்கள் செயல்திறனைச் சோதிக்க சில பிராந்தியங்களில் உள்ள பயனர்களுக்கு முதலில் புதிய அம்சங்களை வெளியிடலாம். Context இந்த அம்சக் கொடிகளை பொருத்தமான கூறுகளுக்கு வழங்க முடியும்.
  

முக்கியமான விஷயங்கள்:

• எல்லா நிலை மேலாண்மைக்கும் மாற்றாக இல்லை: Context என்பது Redux அல்லது Zustand போன்ற முழு அளவிலான நிலை மேலாண்மை நூலகத்திற்கு மாற்றாக இல்லை. உண்மையாகவே உலகளாவியதாகவும், அரிதாகவே மாறக்கூடிய தரவுகளுக்கு Context-ஐப் பயன்படுத்தவும். சிக்கலான நிலை தர்க்கம் மற்றும் கணிக்கக்கூடிய நிலை புதுப்பிப்புகளுக்கு, ஒரு பிரத்யேக நிலை மேலாண்மை தீர்வு அடிக்கடி மிகவும் பொருத்தமானது.
• மீண்டும் வழங்குதல்: context மதிப்பு மாறும்போது, context-ஐப் பயன்படுத்தும் அனைத்து கூறுகளும் மீண்டும் வழங்கப்படும். context அடிக்கடி புதுப்பிக்கப்பட்டால் அல்லது உட்கொள்ளும் கூறுகள் சிக்கலானதாக இருந்தால் இது செயல்திறனைப் பாதிக்கலாம். தேவையற்ற மீண்டும் வழங்குவதைக் குறைக்க உங்கள் context பயன்பாட்டை மேம்படுத்தவும்.

React Context-ஐ எவ்வாறு பயன்படுத்துவது: ஒரு நடைமுறை உதாரணம்

prop drilling எடுத்துக்காட்டை மீண்டும் பார்த்து, React Context-ஐப் பயன்படுத்தி அதைத் தீர்ப்போம்.

1. ஒரு Context-ஐ உருவாக்குங்கள்

முதலில், React.createContext() ஐப் பயன்படுத்தி ஒரு context-ஐ உருவாக்கவும். இந்த context பயனர் தரவை வைத்திருக்கும்.

// UserContext.js
import React from 'react';

const UserContext = React.createContext(null); // இயல்புநிலை மதிப்பு null அல்லது ஆரம்ப பயனர் பொருளாக இருக்கலாம்

export default UserContext;

2. ஒரு Provider-ஐ உருவாக்குங்கள்

அடுத்து, உங்கள் பயன்பாட்டின் ரூட் (அல்லது தொடர்புடைய துணை மரம்) UserContext.Provider உடன் மடிக்கவும். user பொருளை Provider-க்கு value prop ஆக அனுப்பவும்.

// App.js
import React from 'react';
import UserContext from './UserContext';
import Layout from './Layout';

function App() {
  const user = { name: 'ஆலிஸ்', theme: 'dark' };
  return (
    <UserContext.Provider value={user}>
      <Layout />
    </UserContext.Provider>
  );
}

export default App;

3. Context-ஐப் பயன்படுத்துங்கள்

இப்போது, Profile கூறு useContext hook-ஐப் பயன்படுத்தி context-இலிருந்து நேரடியாக user தரவை அணுகலாம். இனி prop drilling இல்லை!

// Profile.js
import React, { useContext } from 'react';
import UserContext from './UserContext';

function Profile() {
  const user = useContext(UserContext);

  return (
    <p>வரவேற்கிறோம், {user.name}!
Theme: {user.theme}</p>
  );
}

export default Profile;

இடைநிலை கூறுகள் (Layout, Header, மற்றும் Navigation) இனி user prop-ஐப் பெற வேண்டியதில்லை.

// Layout.js, Header.js, Navigation.js
import React from 'react';

function Layout({ children }) {
  return (
    <div>
      <Header />
      <main>{children}</main>
    </div>
  );
}

function Header() {
  return (<Navigation />);
}

function Navigation() {
  return (<Profile />);
}

export default Layout;

மேம்பட்ட பயன்பாடு மற்றும் சிறந்த நடைமுறைகள்

1. Context-ஐ useReducer உடன் இணைத்தல்

மேலும் சிக்கலான நிலை நிர்வாகத்திற்காக, நீங்கள் React Context-ஐ useReducer hook உடன் இணைக்கலாம். இது மேலும் கணிக்கக்கூடிய மற்றும் பராமரிக்கக்கூடிய வழியில் நிலை புதுப்பிப்புகளை நிர்வகிக்க உங்களை அனுமதிக்கும். context நிலையை வழங்குகிறது, மேலும் reducer அனுப்பப்பட்ட செயல்களின் அடிப்படையில் நிலை மாற்றங்களை கையாளுகிறது.

// ThemeContext.js
import React, { createContext, useReducer } from 'react';

const ThemeContext = createContext();

const initialState = { theme: 'light' };

const themeReducer = (state, action) => {
  switch (action.type) {
    case 'TOGGLE_THEME':
      return { ...state, theme: state.theme === 'light' ? 'dark' : 'light' };
    default:
      return state;
  }
};

function ThemeProvider({ children }) {
  const [state, dispatch] = useReducer(themeReducer, initialState);

  return (
    <ThemeContext.Provider value={{ ...state, dispatch }}>
      {children}
    </ThemeContext.Provider>
  );
}

export { ThemeContext, ThemeProvider };

// ThemeToggle.js
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function ThemeToggle() {
  const { theme, dispatch } = useContext(ThemeContext);

  return (
    <button onClick={() => dispatch({ type: 'TOGGLE_THEME' })}>
      தீம்-ஐ மாற்று (தற்போதைய: {theme})
    </button>
  );
}

export default ThemeToggle;

// App.js
import React from 'react';
import { ThemeProvider } from './ThemeContext';
import ThemeToggle from './ThemeToggle';

function App() {
  return (
    <ThemeProvider>
      <div>
        <ThemeToggle />
      </div>
    </ThemeProvider>
  );
}

export default App;

2. பல Contextகள்

நீங்கள் நிர்வகிக்க பல்வேறு வகையான உலகளாவிய தரவுகளைக் கொண்டிருந்தால், உங்கள் பயன்பாட்டில் பல context-களைப் பயன்படுத்தலாம். இது உங்கள் கவலைகளைப் பிரிக்கவும் குறியீடு அமைப்பை மேம்படுத்தவும் உதவுகிறது. எடுத்துக்காட்டாக, பயனர் அங்கீகாரத்திற்கான ஒரு UserContext மற்றும் பயன்பாட்டின் தீம்-ஐ நிர்வகிப்பதற்கான ஒரு ThemeContext இருக்கலாம்.

3. செயல்திறனை மேம்படுத்துதல்

முன்னர் குறிப்பிட்டபடி, context மாற்றங்கள், பயன்பாட்டில் உள்ள கூறுகளில் மீண்டும் வழங்குதலைத் தூண்டும். செயல்திறனை மேம்படுத்த, பின்வருவனவற்றைக் கவனியுங்கள்:

• நினைவகப்படுத்துதல்: தேவையற்ற முறையில் கூறுகளை மீண்டும் வழங்குவதைத் தடுக்க React.memo பயன்படுத்தவும்.
• நிலையான context மதிப்புகள்: Provider-க்கு அனுப்பப்படும் value prop ஒரு நிலையான குறிப்பு என்பதை உறுதிப்படுத்தவும். மதிப்பு ஒவ்வொரு ரெண்டரிலும் ஒரு புதிய பொருள் அல்லது வரிசையாக இருந்தால், அது தேவையற்ற மீண்டும் வழங்குதலை ஏற்படுத்தும்.
• தேர்ந்தெடுக்கப்பட்ட புதுப்பிப்புகள்: context மதிப்பு உண்மையில் மாற வேண்டியிருக்கும் போதே அதை புதுப்பிக்கவும்.

4. context அணுகலுக்காக custom hooks பயன்படுத்துதல்

context மதிப்புகளை அணுகுவதற்கும் புதுப்பிப்பதற்கும் தர்க்கத்தை உள்ளடக்குவதற்கு custom hooks-ஐ உருவாக்கவும். இது குறியீடு படிக்கக்கூடிய தன்மையையும் பராமரிப்புத் தன்மையையும் மேம்படுத்துகிறது. எடுத்துக்காட்டாக:

// useTheme.js
import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}

export default useTheme;

// MyComponent.js
import React from 'react';
import useTheme from './useTheme';

function MyComponent() {
  const { theme, dispatch } = useTheme();

  return (
    <div>
      தற்போதைய தீம்: {theme}
      <button onClick={() => dispatch({ type: 'TOGGLE_THEME' })}>
        தீம்-ஐ மாற்று
      </button>
    </div>
  );
}

export default MyComponent;

தவிர்க்க வேண்டிய பொதுவான தவறுகள்

• Context-ஐ அதிகமாகப் பயன்படுத்துதல்: எல்லாவற்றுக்கும் Context-ஐப் பயன்படுத்த வேண்டாம். இது உண்மையில் உலகளாவிய தரவுகளுக்கு மிகவும் பொருத்தமானது.
• சிக்கலான புதுப்பிப்புகள்: context வழங்குநருக்குள் நேரடியாக சிக்கலான கணக்கீடுகள் அல்லது பக்க விளைவுகளைச் செய்வதைத் தவிர்க்கவும். இந்த செயல்பாடுகளைக் கையாள ஒரு reducer அல்லது பிற நிலை மேலாண்மை நுட்பத்தைப் பயன்படுத்தவும்.
• செயல்திறனைப் புறக்கணித்தல்: Context-ஐப் பயன்படுத்தும் போது செயல்திறன் தாக்கங்களைப் பற்றி அறிந்திருங்கள். தேவையற்ற மீண்டும் வழங்குவதைக் குறைக்க உங்கள் குறியீட்டை மேம்படுத்தவும்.
• இயல்புநிலை மதிப்பை வழங்காதது: விருப்பமாக இருந்தாலும், React.createContext()க்கு ஒரு இயல்புநிலை மதிப்பை வழங்குவது, ஒரு கூறு Providerக்கு வெளியே context-ஐப் பயன்படுத்த முயற்சித்தால், பிழைகளைத் தவிர்க்க உதவும்.

React Context-க்கு மாற்றுகள்

React Context ஒரு மதிப்புமிக்க கருவியாக இருந்தாலும், அது எப்போதும் சிறந்த தீர்வாக இருக்காது. இந்த மாற்றுகளைக் கவனியுங்கள்:

• Prop Drilling (சில நேரங்களில்): தரவு சில கூறுகளுக்கு மட்டுமே தேவைப்படும் எளிய நிகழ்வுகளுக்கு, prop drilling Context-ஐப் பயன்படுத்துவதை விட எளிதாகவும் திறமையாகவும் இருக்கலாம்.
• நிலை மேலாண்மை நூலகங்கள் (Redux, Zustand, MobX): சிக்கலான நிலை தர்க்கத்துடன் கூடிய சிக்கலான பயன்பாடுகளுக்கு, ஒரு பிரத்யேக நிலை மேலாண்மை நூலகம் பெரும்பாலும் சிறந்த தேர்வாகும்.
• கூறு கலவை: கூறு மரம் வழியாக தரவை மிகவும் கட்டுப்படுத்தப்பட்ட மற்றும் வெளிப்படையான வழியில் அனுப்ப கூறு கலவையைப் பயன்படுத்தவும்.

முடிவுரை

React Context என்பது prop drilling இல்லாமல் கூறுகளுக்கு இடையே தரவைப் பகிர்வதற்கான ஒரு சக்திவாய்ந்த அம்சமாகும். அதை எப்போது, ​​எப்படிப் பயன்படுத்துவது என்பதைப் புரிந்துகொள்வது பராமரிக்கக்கூடிய மற்றும் செயல்திறன் மிக்க React பயன்பாடுகளை உருவாக்குவதற்கு முக்கியமானது. இந்த வழிகாட்டியில் கோடிட்டுக் காட்டப்பட்டுள்ள சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலமும், பொதுவான தவறுகளைத் தவிர்ப்பதன் மூலமும், உங்கள் குறியீட்டை மேம்படுத்தவும் சிறந்த பயனர் அனுபவத்தை உருவாக்கவும் React Context-ஐப் பயன்படுத்தலாம். உங்கள் குறிப்பிட்ட தேவைகளை மதிப்பிடவும், Context-ஐப் பயன்படுத்துவதா இல்லையா என்பதை முடிவு செய்வதற்கு முன் மாற்றுகளைக் கருத்தில் கொள்ளவும் நினைவில் கொள்ளுங்கள்.