React 基础篇(七)—— Context

Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。

一般情况下,数据是通过 props 属性自上而下进行传递的,但这种做法对于某些类型的属性是极其繁琐的,比如主题,这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式,而不必显示地通过组件树逐层传递 props

Context 设计目的是为了共享那些对于一个组件树而言是 “全局” 的数据,比如前面提到的主题。在下面代码中通过一个 theme 属性手动调整一个按钮组件的样式:

class App extends React.Component {

render() {

return ;

}

}

function Toolbar(props) {

// Toolbar 组件接受一个额外的“theme”属性,然后传递给 ThemedButton 组件。

// 如果应用中每一个单独的按钮都需要知道 theme 的值,这会是件很麻烦的事,

// 因为必须将这个值层层传递所有组件。

return (

);

}

class ThemedButton extends React.Component {

render() {

return ;

}

}

使用 context ,就可以避免通过中间元素传递 props

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值