Maîtriser React : choses essentielles que vous devez toujours savoir-js tutoriel-php.cn

Maîtriser React : choses essentielles que vous devez toujours savoir

Mary-Kate Olsen

Libérer： 2024-12-06 16:12:15

original

461 Les gens l'ont consulté

Mastering React: Essential Things You Should Always Know

React est devenue l'une des bibliothèques JavaScript les plus populaires pour créer des interfaces utilisateur. Que vous soyez un développeur débutant ou intermédiaire, il existe plusieurs concepts clés et bonnes pratiques qui peuvent améliorer vos compétences React. Examinons les éléments essentiels que vous devez toujours savoir lorsque vous travaillez avec React.

1. Composition des composants et réutilisabilité

La force fondamentale de React réside dans son architecture robuste basée sur des composants, qui met l'accent sur le développement et la création de petits composants réutilisables. Cette approche améliore non seulement l'efficacité de la création d'interfaces utilisateur, mais encourage également l'utilisation de ces composants à plusieurs endroits dans une application, favorisant ainsi la cohérence et réduisant la redondance dans le code.

// Bad: Monolithic Component
function UserProfile() {
  return (
    <div>
      <h1>{user.name}</h1>
      <div>{user.bio}</div>
      <button onClick={handleEdit}>Edit Profile</button>
      <div>
        <h2>User Posts</h2>
        {user.posts.map(post => (
          <div key={post.id}>{post.content}</div>
        ))}
      </div>
    </div>
  );
}

// Good: Composable Components
function UserHeader({ name }) {
  return <h1>{name}</h1>;
}

function UserBio({ bio }) {
  return <div>{bio}</div>;
}

function UserPosts({ posts }) {
  return (
    <div>
      <h2>User Posts</h2>
      {posts.map(post => (
        <PostCard key={post.id} post={post} />
      ))}
    </div>
  );
}

function UserProfile({ user }) {
  return (
    <div>
      <UserHeader name={user.name} />
      <UserBio bio={user.bio} />
      <EditProfileButton userId={user.id} />
      <UserPosts posts={user.posts} />
    </div>
  );
}

Copier après la connexion

2. Stratégies de gestion de l'État

Il est important de comprendre les moments appropriés pour utiliser l'état local, le contexte et diverses bibliothèques de gestion d'état dans votre processus de développement d'applications. Savoir quand utiliser efficacement ces outils peut grandement améliorer l'organisation et les fonctionnalités de votre code.

import React, { useState, useContext, useReducer } from 'react';

// Local State (for simple, component-specific state)
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// Context API (for medium-complexity state sharing)
const ThemeContext = React.createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

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

// Reducer for Complex State Management
function userReducer(state, action) {
  switch (action.type) {
    case 'LOGIN':
      return { ...state, isAuthenticated: true, user: action.payload };
    case 'LOGOUT':
      return { ...state, isAuthenticated: false, user: null };
    default:
      return state;
  }
}

function AuthComponent() {
  const [state, dispatch] = useReducer(userReducer, {
    isAuthenticated: false,
    user: null
  });

  const login = (userData) => {
    dispatch({ type: 'LOGIN', payload: userData });
  };

  const logout = () => {
    dispatch({ type: 'LOGOUT' });
  };
}

Copier après la connexion

3. Techniques d'optimisation des performances

Soyez toujours attentif aux performances :

import React, { useMemo, useCallback, memo } from 'react';

// Memoization to prevent unnecessary re-renders
const ExpensiveComponent = memo(({ data }) => {
  // Render logic
});

function ParentComponent({ data }) {
  // useMemo for expensive calculations
  const processedData = useMemo(() => {
    return data.map(item => heavyProcessing(item));
  }, [data]);

  // useCallback to memoize event handlers
  const handleClick = useCallback(() => {
    // Click handler logic
  }, []);

  return (
    <div>
      <ExpensiveComponent data={processedData} />
      <button onClick={handleClick}>Perform Action</button>
    </div>
  );
}

Copier après la connexion

4. Gestion des erreurs et limites

Implémentez des limites d'erreur pour gérer efficacement les erreurs d'exécution :

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Log error to monitoring service
    logErrorToService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

function App() {
  return (
    <ErrorBoundary>
      <MainApplication />
    </ErrorBoundary>
  );
}

Copier après la connexion

5. Meilleures pratiques en matière de crochets

Utilisez des hooks personnalisés pour extraire et partager la logique avec état
Suivez les règles des crochets (appelez uniquement les crochets au niveau supérieur)
Évitez de mettre les crochets à l'intérieur de conditions ou de boucles

// Custom Hook Example
function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      const valueToStore = value instanceof Function 
        ? value(storedValue) 
        : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.log(error);
    }
  };

  return [storedValue, setValue];
}

Copier après la connexion