開源日報每天推薦一個 GitHub 優質開源項目和一篇精選英文科技或編程文章原文，堅持閱讀《開源日報》，保持每日學習的好習慣。
2023年12月22日，開源日報第1051期：
今日推薦開源項目：《first-contributions》
今日推薦英文原文：《Best Practices of React Context》

開源項目

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

推薦理由：🚀✨ Help beginners to contribute to open source projects
該項目旨在簡化並指導beginners對開源項目貢獻，一般簡稱提pr。按照以下步驟操作，對於不熟悉命令行的人可以使用圖形界面工具的教程

英文原文

今日推薦英文原文：Best Practices of React Context

推薦理由：React框架的Context API是一項強大的功能，能夠在整個組件樹中高效地管理狀態，它解決了傳遞屬性的繁瑣問題，使得全局數據共享變得簡單，該文章對於這一 api 給了一些最佳實踐的例子

The React framework, known for its efficiency and flexibility, offers a range of features that empower developers to create robust and scalable web applications. Among these features, the React Context API is a key tool that enables React developers to manage state and pass data throughout the component tree without the need for prop drilling. It』s incredibly useful for handling 「global」 data that』s required by many components within an application, such as user authentication, theme, or preferred language.

However, while the Context API is powerful, it requires a thoughtful approach to prevent unwanted re-renders and to maintain the performance of your application. This blog post aims to explore best practices for using the React Context API, ensuring that your application remains efficient and your code is maintainable.

Understanding the Basics of React Context

React Context is a feature introduced in React 16.3 to allow data to be shared between components without having to pass them through props.

The Context API can help solve the problem of 「prop drilling,」 which refers to the process of passing data from top-level components down to lower levels of the component tree.

By using Context, you can provide state directly to the components that need it, no matter where they are in the component tree.

const MyContext = React.createContext(defaultValue);

React Context is created using, which returns an object with a Provider and a Consumer

The Provider component is used higher in the tree and accepts a value prop. The value can be anything - a string, an object, a function, etc.

<MyContext.Provider value={/* some value */}>

Any component that needs the data stored in Context can access it through the Consumer component. The Consumer uses a render prop API – meaning it takes a function as its child. The function receives the context value and returns a React node.

<MyContext.Consumer>  
  {value => /* render something based on the context value */}  
</MyContext.Consumer>

Alternatively, the useContext The hook can be used to access context within a functional component.

const value = useContext(MyContext);

Here are some best practices for using React context:

  1. Use context for shared state: React context is ideal for managing shared state that needs to be accessed by multiple components throughout your application. This can include user authentication, theme settings, language preferences, or any other global data that needs to be shared.
  2. Avoid overusing context: While context can be very useful, it』s important not to overuse it. Only use context when it genuinely makes sense to share state across different parts of your application. Overusing context can lead to a more complex and less predictable component hierarchy.
  3. Keep context providers near the top of the component tree: To ensure that context providers are readily available to child components that need them, place the providers near the top of your component tree. This is typically done in the highest-level or layout components.
  4. Use separate context instances for logically distinct data: Create separate context instances for different types of data. For example, have a separate context for user authentication and another for theme settings. This helps keep your code organized and makes it easier to manage and update each piece of shared data independently.
  5. Provide sensible default values: When creating a context provider, provide sensible default values for the context. This ensures that components using the context can function even if the context provider isn』t yet available or has not been properly configured.
  6. Use the useContext hook for consuming context: React provides the useContext hook for consuming context. It's a cleaner and more concise way to access context values in functional components compared to the older Context.Consumer approach.
import React, { useContext } from 'react';  
import MyContext from './MyContext';  

function MyComponent() {  
  const contextValue = useContext(MyContext);  
  // Use contextValue as needed  
}
  1. Separate context providers and consumers: Keep your context providers and consumers separate to make your code more maintainable and easier to reason about. This separation of concerns makes it clear where the state is defined and where it is consumed.
  2. Avoid deep nesting of context providers: Be mindful of deeply nesting context providers, as this can make your component tree more complex and harder to maintain. If you find yourself nesting multiple context providers deeply, consider refactoring your component structure.
  3. Optimize context performance: Context is generally very efficient, but if you notice performance issues, you can use memoization techniques like React.memo or useMemo to prevent unnecessary re-renders of components that consume context.
  4. Document your context: Provide clear and concise documentation for your context providers and the data they manage. This will make it easier for other developers (including your future self) to understand how to use the context in your application.

By following these best practices, you can effectively utilize React context in your application while maintaining a clean and manageable codebase. It will help you share and manage the state in a more organized and efficient manner.

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