React Hooks(三) useContext

useContext()可以用于组件之间共享状态。

使用方法

1.引入createContext, useContext
2.通过createContext来创建句柄
3.通过Context.Provider来确定共享范围
4.通过value来分发内容
5.在子组件中通过useContext(Context)来获取数据

现在有俩组件,需要共享状态,如下:

<div className="test">
	<Navbar />
	<Messages />
</div>

第一步:在它们的父组件上使用React的Context API,在组件外部创建有一个Context

const TestContext = React.createContext({});

第二步:TestContext.Provider提供了一个Context对象,这个对象是可以被子组件共享的

<TestContext.Provider 
	value={{
		username: 'superawesome',
	}}
>
	<div className="test">
		<Navbar />
		<Messages />
	</div>
<TestContext.Provider/>

第三步:使用useContext()钩子函数来引入Context对象,从中获取username属性

const Messages = () => {
	const { username } = useContext(TestContext);
	return (
		<div className="messages">
      		<p>1 message for {username}</p>
		</div>
	)
}

所有代码如下:

import React, { useContext, createContext } from "react";
import ReactDOM from "react-dom";

const TestContext= createContext({});

const Navbar = () => {
  const { username } = useContext(TestContext)

  return (
    <div className="navbar">
      <p>{username}</p>
    </div>
  )
}

const Messages = () => {
  const { username } = useContext(TestContext)

  return (
    <div className="messages">
      <p>1 message for {username}</p>
    </div>
  )
}

function App() {
  return (
	<TestContext.Provider 
		value={{
			username: 'superawesome',
		}}
	>
		<div className="test">
			<Navbar />
			<Messages />
		</div>
	<TestContext.Provider/>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

注意点:
使用了useContext的组件总会在context值变化时重新渲染,相当于useContext可以读取context的值以及订阅context的变化。即使祖先使用React.memo或者shouldComponentUpdate,也会在组件本身使用 useContext 时重新渲染。
看个例子:

import React, { useState, createContext } from "react";
import Test6 from "./Test6";
export const testContext = createContext({})

const App = () => {
  const [count, setCount] = useState(0)

  const addCount = () => {
    setCount(count+1)
  }

  return (
    <>
      <testContext.Provider value={
        {count}
      }>
        <Test6 />
      </testContext.Provider>
      <button onClick={addCount}>{count}</button>
    </>
  );
}

export default App;

Test6.js

import React, { useContext } from 'react'
import { testContext } from './App'
const Test6 = React.memo(() => {
  let {count} = useContext(testContext)
  
  return (
    <div>
      {count}
    </div>
  )
})
export default Test6

结果:
请添加图片描述
每更改count的值,Test6组件即使用了memo也会重新渲染。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值