[React] Use the new React Context API
The React documentation has been warning us for a long time now that context shouldn't be used and that the API is unstable. Well, with the release of React 16.3, we're finally getting a stable context API and what's even better is that it has received a makeover and the dev experience is fantastic! In this lesson, we'll look at an example app that passes props down several levels deep into the component tree and replace all that prop drilling with the new context API. We'll see how to create a Provider and a Consumer, how to use them in the code and we'll take a look at how the default properties that get passed into createContext
come into play.
A condition that we need 'context' API is to avoid pass Props all the way down to the component tree.
For example:
So porps are passed all the way down from
PageWrapper
-- ProfileWrapper
-- ProfileDetails
New context API looks like this:
1. Create an Context service:
import { createContext } from "react"; const ProfileContext = createContext({ firstName: "Sally", lastName: "Anderson" }); export const ProfileProvider = ProfileContext.Provider; export const ProfileConsumer = ProfileContext.Consumer;
'createContext' takes an default value.
2. Wrap the top level component into Provider:
import { ProfileProvider } from "./ProfileContext"; render() { return ( <ProfileProvider value={this.state.profile}> <PageWrapper /> </ProfileProvider> ); }
If you want to just use default value, don't provide the Provider... this approach is a little bit strange.
render() { return ( <PageWrapper /> // may change in release ); }
3. Remove all the props passed down.
4. In the component which do need context, use Consumer, Cunsumer takes a function as child.
import React from "react"; import { ProfileConsumer } from "./ProfileContext"; export const ProfileDetails = props => ( <ProfileConsumer> {context => ( <div> <div> <strong>First name:</strong> {context.firstName} </div> <div> <strong>Last name:</strong> {context.lastName} </div> </div> )} </ProfileConsumer> );
相关文章
- [Web 前端] React-router4简约教程
- 玩转 React(四)- 创造一个新的 HTML 标签
- react-app 编写测试
- [React] Use the React Context API to Globally Manage State
- [React] Handle React Suspense Errors with an Error Boundary
- [React Testing] Using __mocks__ to mock the promise based API
- [React] Safely setState on a Mounted React Component through the useEffect Hook
- [PReact] Reduce the Size of a React App in Two Lines with preact-compat
- React.js 小书
- react native 使用typescript
- [React] Scaffold a React application with pnpm and vite
- [React Typescript 2022] Type a Radio Button Component in React using TypeScript
- [React] Use the React Context API to Globally Manage State
- [Node.js] Mock an API for Local Development in React with Mirage JS
- [React] Setup an API Proxy in Create React App
- [React Testing] Improve Test Confidence with the User Event Module
- [React] Reference a node using createRef() in React 16.3
- react创建组件值state
- 201-React顶级API
- React----组件生命周期知识点整理
- 使用React做一个音乐播放器