【每日一题】React里的context

前端印记

共 1197字,需浏览 3分钟

 ·

2021-08-24 02:45

人生苦短,总需要一点仪式感。比如学前端~

Context 有哪些属性?

  • createContext 创建 Context 对象
  • Provider 将 context 的值传递给消费组件
  • contextType 挂载在组件上,属性会被赋值为由React.createContext()创建的 Context 对象,可以使用 this.context 来消费最近 Context 上的那个值
  • Consumer 订阅 context 的变更,需要函数作为子元素
  • displayName 作为 context 的属性,ReactDevTools 使用该字符串来确定 context 要显示的内容

怎么使用 Context 开发组件?

  • 父组件创建 Context,子组件可以通过指定 contextType 拿到最近父组件的 context
  • 使用生产消费模式的 Provider 包括子组件,子组件通过 props 获取 context
  • 使用 Consumer, 接收回调函数,可以拿到 context

除了实例的属性可以获得 Context 外,哪些地方还能直接获取 Context ?

  • constructor
  • 生命周期 :
    • componentWillReceiveProps(nextProps,nextContext)
    • shouldComponentUpdate(nextProps ,nextState,nextContext)
    • componentWillUpdate(nextProps, ,nextState, nextContext)

为什么 React 并不推荐我们优先考虑使用 Context?

  1. Context 目前并未完善,会在后面的版本中有很大的变化,为了给升级带来巨大的影响
  2. Context 会破坏组件树之间的依赖关系
  3. Context 的值更新要依赖 setState/useState,这并不可靠,因为中间的组件可能会改变它,导致其他组件不能保证 context 的更新

END
愿你历尽千帆,归来仍是少年。


让我们一起携手同走前端路!

● 工作中常见页面布局的n种实现方法

● 三栏响应式布局(左右固宽中间自适应)的5种方法

● 两栏自适应布局的n种实现方法汇总

● 工作中常见的两栏布局案例及分析

● 垂直居中布局的一百种实现方式

● 常用九宫格布局的几大方法汇总

● 为什么操作DOM会影响WEB应用的性能?

● 移动端滚动穿透的6种解决方案

● Vue + TypeScript 踩坑总结

浏览 54
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报