開源日報每天推薦一個 GitHub 優質開源項目和一篇精選英文科技或編程文章原文，堅持閱讀《開源日報》，保持每日學習的好習慣。
2023年12月31日，開源日報第1060期：
今日推薦開源項目：《papers-we-love》
今日推薦英文原文：《React Component Architecture for Job Interviews》

開源項目

今日推薦開源項目：《papers-we-love》傳送門：項目鏈接

推薦理由： "Papers We Love"（PWL）是一個聚焦學術計算機科學論文的社區，通過閱讀、討論和學習推廣優秀論文, 也可以在Discord討論PWL相關內容

英文原文

今日推薦英文原文：React Component Architecture for Job Interviews

推薦理由：本文介紹了在React面試中關於組件架構的重要概念和技巧，涵蓋組件架構的基本理念，包括文件結構、Atomic Design、容器組件與展示組件的區分等等，還介紹了在構建大型React應用時如何通過高階組件（HOC）和高階函數（HOF）來實現代碼重用和可擴展性，最後有自定義Hooks來實現可重用邏輯的方法的例子，比較實用

React Component Architecture for Job Interviews

Are you preparing for a React job interview and want to get right the questions on component architecture? In this post, we』ll cover essential concepts and tips related to component architecture in React, along with some examples. By the end, you』ll be well-equipped to tackle component-related questions with confidence. Let』s dive in!

Understanding Component Architecture

Component architecture is a fundamental concept in React development. It involves breaking down your React application into smaller, self-contained building blocks called components. Each component handles a specific functionality or represents a UI element. This approach improves code organization, making the project more scalable and maintainable.

Tips on Organizing Components

File Structure: A clean file structure is essential for managing large React projects. Group related components into folders and use TypeScript .tsx files and .scss for styles. For instance:

src/
  components/
    Header/
      Header.tsx
      Header.scss
    Sidebar/
      Sidebar.tsx
      Sidebar.scss
  pages/
    Home/
      Home.tsx
      Home.scss
    About/
      About.tsx
      About.scss
  App.tsx
  index.tsx

This is just one of many possibilities we can have for file structure. Frameworks like Next.js already provide their own proposal of the file structure, especially for the pages. it's worth taking a look.

Atomic Design: Familiarize yourself with Atomic Design principles to organize components based on complexity and reusability. Start with atoms (e.g., buttons, inputs), then build molecules (e.g., forms), organisms (e.g., complete headers), and finally templates and pages.

Container vs. Presentational Components: Understand the distinction between container and presentational components. Container components handle logic and data manipulation, while presentational components focus solely on visual representation. This promotes code reuse and easier testing.

Scaling Up with Higher-Order Components (HOC) and Higher-Order Functions (HOF)

When building larger React applications, you』ll often encounter the need for code reuse and scalability. Here』s how Higher-Order Components (HOCs) and Higher-Order Functions (HOFs) come to the rescue.

Higher-Order Components (HOC)

HOCs are functions that take a component as input and return an enhanced version of that component. They are widely used for cross-cutting concerns such as authentication or authorization. Let』s see an example:

import React from 'react';

interface WithAuthProps {
  isAuthenticated: boolean;
}

const withAuth = <P extends object>(
  WrappedComponent: React.ComponentType<P & WithAuthProps>
) => {
  return class extends React.Component<P & WithAuthProps> {
    render() {
      if (this.props.isAuthenticated) {
        return <WrappedComponent {...this.props as P} />;
      } else {
        return <p>Please login to access this content.</p>;
      }
    }
  };
};

interface MyComponentProps {
  // Add your component's props here
}

const MyComponent: React.FC<MyComponentProps> = (props) => {
  // Your component logic here
};

const AuthenticatedComponent = withAuth(MyComponent);

Now, AuthenticatedComponent will render MyComponent only if the user is authenticated; otherwise, it displays a message asking the user to log in.

Higher-Order Functions (HOF)

HOFs, on the other hand, are functions that take a function as input and return a new function with extended functionality. They shine when you need to apply similar transformations or filters to different datasets.

const withFilter = <T extends unknown>(
  filterFunction: (data: T) => boolean
) => (data: T[]) => {
  return data.filter(filterFunction);
};

const numbers = [1, 2, 3, 4, 5];
const evenNumbersFilter = (num: number) => num % 2 === 0;
const getEvenNumbers = withFilter<number>(evenNumbersFilter);

const evenNumbers = getEvenNumbers(numbers);
// Output: [2, 4]

Both HOCs and HOFs are essential concepts to grasp for writing scalable and maintainable React applications.

Reusable Logic with Custom Hooks

Custom Hooks offer an elegant solution for organizing and reusing component logic. They enable you to extract logic into reusable functions and improve code readability.

import React, { useState } from 'react';

const useFormInput = (initialValue: string) => {
  const [value, setValue] = useState(initialValue);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  return {
    value,
    onChange: handleChange,
  };
};

const MyFormComponent: React.FC = () => {
  const firstName = useFormInput('');
  const lastName = useFormInput('');

  return (
    <form>
      <input type="text" {...firstName} />
      <input type="text" {...lastName} />
    </form>
  );
};

By using this custom Hook, you can easily add form handling to any component without duplicating the logic.

Conclusion

Congratulations! You』ve now learned the ins and outs of React component architecture and how to apply them to create scalable and maintainable code. Armed with the knowledge of Higher-Order Components (HOCs), Higher-Order Functions (HOFs), and Custom Hooks, you』re well-prepared for React job interviews.

Remember to practice implementing these concepts in real projects, as hands-on experience is the best way to solidify your understanding. Best of luck in your React job interviews, and happy coding! 😄🚀

下載開源日報APP：https://openingsource.org/2579/
加入我們：https://openingsource.org/about/join/
關注我們：https://openingsource.org/about/love/

開源日報第1060期：優秀論文合集：《papers-we-love》