M

MLOG

தமிழ்

உங்கள் பயன்பாடுகளில் திறமையான நிலை நிர்வாகத்திற்காக React Context-ஐப் பயன்படுத்துங்கள். Context-ஐ எப்போது, ​​எப்படிப் பயன்படுத்துவது, பொதுவான தவறுகளைத் தவிர்ப்பது எப்படி என்பதை அறிக.

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

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

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

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

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


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 ஒரு வழியை வழங்குகிறது. இது மூன்று முக்கிய பாகங்களைக் கொண்டுள்ளது:

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

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

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

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 மாற்றங்கள், பயன்பாட்டில் உள்ள கூறுகளில் மீண்டும் வழங்குதலைத் தூண்டும். செயல்திறனை மேம்படுத்த, பின்வருவனவற்றைக் கவனியுங்கள்:

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;

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

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

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

முடிவுரை

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