![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React 的组件通信
白猫儿
有好的工作私信我
展开
-
React - Context API 维护全局状态,实现全局组件通信
Context API 维护全局状态,实现全局组件通信Context API 有 3 个关键的要素:React.createContext、Provider、Consumer。我们通过调用React.createContext,可以创建出一组 Provider。Provider 作为数据的提供方,可以将数据下发给自身组件树中任意层级的 Consumer。React.createContext: 作用是创建一个 context 对象。const AppContext = React.createC原创 2020-11-09 17:29:12 · 368 阅读 · 0 评论 -
React 发布-订阅者模式 实现组件之间的通信
React 发布-订阅者模式 实现组件之间的通信React在实现组件之间通信时,对于“父-孙”,以及兄弟组件之间的信息传递,如果再使用props实现将会非常复杂,因此使用 “发布-订阅者模式” 将会简化这些操作。原生JS中,dom事件中使用 target.addEventListener(type, listener, useCapture) 完成对事件的监听,也是最早的发布订阅者模式。使用发布-订阅模式的优点在于,监听事件的位置和触发事件的位置是不受限的,这个特性,太适合用来应对“任意组件通信”这种原创 2020-10-28 13:29:44 · 608 阅读 · 0 评论 -
React 父子组件传值的方式
父子组件传值的方式1. 父传子由于React是单向数据流,因此造成了当前组件的state以props形式流动时,只能流向组件树中比自己层级更低的组件。 比如在父-子组件这种嵌套关系中,只能由父组件传 props 给子组件,而不能反过来。子组件代码function Child(props) { return ( <div className="child"> <p>{`子组件接收父组件的文本内容是:[${props.fatherText}]`}</原创 2020-10-23 11:38:30 · 1045 阅读 · 0 评论