開源日報每天推薦一個 GitHub 優質開源項目和一篇精選英文科技或編程文章原文，堅持閱讀《開源日報》，保持每日學習的好習慣。
開源日報第1115期：500行代碼構建一個對話搜索引擎《search_with_lepton》
2024年2月24日，開源日報第1115期：
今日推薦開源項目：《search_with_lepton》
今日推薦英文原文：《Best Practices — Multiple Child Components in React》

開源項目

今日推薦開源項目：《search_with_lepton》傳送門：項目鏈接

推薦理由：使用Lepton AI 構建一個快速的基於對話的搜索演示
直達鏈接: search.lepton.run

LLM的內置支持
搜索引擎的內置支持
定製化的 UI 界面
可共享、緩存的搜索結果

英文原文

今日推薦英文原文：Best Practices — Multiple Child Components in React

推薦理由：文章探討在 React 中創建多個子組件的最佳實踐。通過將應用程序拆分為較小的、可重用的代碼塊，可以提高代碼的可讀性、可維護性和性能。文章強調了組件的模塊化、單向數據流動、避免嵌套過深、使用 React Fragments、為列表項提供唯一的鍵、組件組合以及測試等方面的重要性，以及測試不足以及忽視 React DevTools 等

Best Practices — Multiple Child Components in React

Explore these best practices to build more maintainable, performant, and modular React applications!

React, with its component-based architecture, allows you to build complex user interfaces by composing smaller, reusable pieces of code. When creating multiple child components within a React application, it』s essential to follow best practices to ensure maintainability, performance, and a smooth development process. In this article, we』ll explore the best practices for working with multiple child components in React.

Photo by Markus Spiske on Unsplash

Understanding the Need

Before delving into best practices, let』s understand why creating multiple child components is essential in React.

Reusability:
Dividing your application into smaller components makes it easier to reuse code. When you create components that serve specific purposes, you can use them across different parts of your application.
Maintainability:
Smaller, focused components are easier to maintain. They follow the Single Responsibility Principle, which states that each component should do one thing and do it well.
Readability:
Code becomes more readable when you break it down into smaller, understandable pieces. This makes it easier for developers to collaborate and understand the application』s structure.
Performance:
React』s virtual DOM and reconciliation process optimize updates when components change. Smaller components help React efficiently update the UI by reducing the scope of changes.

Best Practices

Now, let』s explore the best practices for creating and working with multiple child components in React.

1. Component Modularity

Create small, focused components that serve a single purpose.

Each component should have a specific responsibility, making it easier to understand and maintain.
For example, if you』re building a user profile page, break it down into components like UserProfileHeader, UserProfileBio, and UserProfilePosts.

// UserProfileHeader.js
function UserProfileHeader(props) {
  // Component logic
}
// UserProfileBio.js
function UserProfileBio(props) {
  // Component logic
}
// UserProfilePosts.js
function UserProfilePosts(props) {
  // Component logic
}

2. Props and Data Flow

Pass data and props down the component hierarchy, following a unidirectional data flow.

In React, data should flow from parent components to child components through props. This ensures that components are predictable and easy to test.

// ParentComponent.js
function ParentComponent() {
  const data = "Some data";
  return <ChildComponent data={data} />;
}
// ChildComponent.js
function ChildComponent(props) {
  return <div>{props.data}</div>;
}

3. Avoid Component Hell

Avoid creating deeply nested component hierarchies.

Excessive nesting can lead to a complex and hard-to-maintain codebase. When components become deeply nested, it』s challenging to manage state and props effectively. Consider breaking down complex components into smaller ones\.

4. Use React Fragments

When returning multiple elements from a component, use React Fragments (<>...</>) to avoid unnecessary parent elements.

React Fragments allow you to group multiple elements without adding extra nodes to the DOM. This helps keep the DOM clean and improves performance.

function MyComponent() {
  return (
    <>
      <div>Element 1</div>
      <div>Element 2</div>
    </>
  );
}

5. Keys for Lists

When rendering lists of components, provide a unique key prop to each item.

React uses keys to identify list items and efficiently update them. Using unique keys ensures proper rendering and helps avoid issues when reordering or deleting items.

function ListComponent(props) {
  const items = props.items.map((item) => (
    <ListItem key={item.id} item={item} />
  ));
  return <ul>{items}</ul>;
}

6. Component Composition

Compose complex UIs by combining multiple child components.

Instead of creating monolithic components, build your UI by combining smaller, reusable child components. This promotes code reusability and simplifies testing.

function ComplexComponent() {
  return (
    <div>
      <UserProfileHeader />
      <UserProfileBio />
      <UserProfilePosts />
    </div>
  );
}

7. Testing

Write unit tests for individual child components.

Isolate the testing of child components to ensure they work correctly. This simplifies debugging and makes it easier to catch and fix issues early in development.

8. Performance Optimization

Implement performance optimizations like shouldComponentUpdate, PureComponent, or React.memo as needed.

Performance is critical in React applications. Use these techniques to prevent unnecessary renders and improve the overall performance of your components.

Common Pitfalls

While working with multiple child components in React, watch out for common pitfalls:

**Overusing State:

**Avoid adding state to components that don』t need it. Instead, use props for data flow.
Prop Drilling:
Passing props through multiple layers of components can become cumbersome. Consider using React Context or state management libraries like Redux for complex data sharing.
Not Using PureComponent or React.memo:
If your components are re-rendering unnecessarily, consider optimizing with PureComponent or React.memo.
Inadequate Testing:
Skipping unit tests for child components can lead to undetected bugs. Test each component in isolation.
Ignoring the React DevTools:
Familiarize yourself with the React DevTools extension for your browser. It provides valuable insights into component hierarchies and performance.

Summary

Creating multiple child components in React follows the principles of modularity, reusability, and maintainability. By adhering to best practices and being aware of common pitfalls, you can build robust and efficient React applications that are easier to develop and maintain.

Conclusion

That』s all I can think of at the moment. I may add to this article as I think of other things. I hope this helps!

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

開源日報第1115期：500行代碼構建一個對話搜索引擎 《search_with_lepton》