首页 > 其他分享 >React hooks useContext

React hooks useContext

时间:2022-10-28 11:02:48浏览次数:53  
标签:const name hooks AppContext React useContext 组件

useContext():共享状态钩子

该钩子的作用是,在组件之间共享状态。关于Context这里不再赘述,其作用就是可以做状态的分发,在React16.X以后支持,避免了react逐层通过Props传递数据。
下面是一个例子,现在假设有A组件和B组件需要共享一个状态。

const App = () => {
  const AppContext = React.createContext({})
  const A =() => {
    const { name } = useContext(AppContext)
    return (
        <>A组件的{name}</>
    )
}
const B =() => {
  const { name } = useContext(AppContext)
  return (
      <>B组件的{name}</>
  )
}
  return (
    <AppContext.Provider value={{name: 'useContext测试'}}>
    <A/>
    <B/>
    </AppContext.Provider>
  )
}
export default App;
 

标签:const,name,hooks,AppContext,React,useContext,组件
From: https://www.cnblogs.com/SHGG/p/16835070.html

相关文章

  • React动画实现方案之 Framer Motion,让你的页面“自己”动起来
    前言相信很多前端同学都或多或少和动画打过交道。有的时候是产品想要的过度效果;有的时候是UI想要的酷炫动画。但是有没有人考虑过,是不是我们的页面上面的每一次变化,都可以......
  • react 受控组件与非受控组件
    概述React中的受控组件和非受控组件都是针对于表单数据而言的。React推荐使用受控组件来处理表单数据。在受控组件中,表单数据由React组件的state管理。在非受控组......
  • React + Ant Design 搭建个人博客
    react框架学的差不多了,就想搭建一个博客,沉淀一下!记录走过的点点滴滴!博客主要运用技术栈:react:项目主框架redux:状态管理reacr-router:前端路由控制es6:项目中的JS语......
  • react Hooks 钩子函数
    什么是Hooks?首先:React的组件创建方式,一种是类组件,一种是纯函数组件。React团队认为组件的最佳写法应该是函数,而不是类。但是纯函数组件有着类组件不具备的特点:纯函数......
  • React进阶篇——十、高阶组件使用场景
    十、高阶组件使用场景操纵props在被包装组件接收props前,高阶组件可以先拦截到props,对props执行增加、删除或修改的操作,然后将处理后的props再传递给被包装组件,上一篇的......
  • react组件深度解读
    五、React核心是组件在React中,我们使用组件(有状态、可组合、可重用)来描述UI。在任何编程语言中,你都可以将组件视为简单的函数。React组件也一样,它的输入是props......
  • React实现一个简易版Swiper
    背景最近在公司内部进行一个引导配置系统的开发中,需要实现一个多图轮播的功能。到这时很多同学会说了,“那你直接用swiper不就好了吗?”。但其实是,因为所有引导的展示都是作......
  • React高级特性之Render Props
    renderprop是一个技术概念。它指的是使用值为function类型的prop来实现Reactcomponent之间的代码共享。如果一个组件有一个render属性,并且这个render属性的值为一个返......
  • React高级特性之Context
    Context提供了一种不需要手动地通过props来层层传递的方式来传递数据。正文在典型的React应用中,数据是通过props,自上而下地传递给子组件的。但是对于被大量组件使用的......
  • 项目实战:在线报价采购系统(React +SpreadJS+Echarts)
    小伙伴们对采购系统肯定不陌生,小到出差路费、部门物资采购;大到生产计划、原料成本预估都会涉及到该系统。管理人员可以通过采购系统减少管理成本,说是管理利器毫不过分,对于......