react useContent
时间: 2023-09-29 12:03:14 浏览: 69
React 的 useContext() hook 用于在组件间共享数据,它接收一个 context 对象(通过 React.createContext() 创建)并返回该 context 的当前值。在使用 useContext() 的组件中,只要该 context 发生了变化,组件就会重新渲染。
下面是一个简单的例子:
```jsx
import React, { useContext } from 'react';
const MyContext = React.createContext('defaultValue');
function MyComponent() {
const value = useContext(MyContext);
return <div>{value}</div>;
}
function App() {
return (
<MyContext.Provider value="Hello World">
<MyComponent />
</MyContext.Provider>
);
}
```
在上面的例子中,MyComponent 组件内使用了 useContext() hook 来获取 MyContext 的值,而 App 组件则提供了一个 MyContext.Provider,将 'Hello World' 作为 MyContext 的值传递给了 MyComponent。
当 MyComponent 渲染时,它会显示 'Hello World'。如果我们将 MyContext.Provider 的 value 改为 'Hello React',那么 MyComponent 会重新渲染并显示 'Hello React'。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)