开源日报每天推荐一个 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/