react 通信方式-组件创建方式总结

简介: 单个的知识点比较散,文章也比较多了,这篇就针对常用的东西,来个总结性的文章

1. 前言


单个的知识点比较散,文章也比较多了,这篇就针对常用的东西,来个总结性的文章


2. 创建组件的方式


2.1 纯函数式组件

没有state 和生命周期钩子

2.2 类组件

有 state和 生命周期钩子

2.3 高阶组件 HOC

本身其实是一个函数,参数是组件

2.4 Hooks组件

使函数组件,可以有state 和 钩子

2.5 自定义 Hooks

其实这个就是自己定义 hook 来写state等

2.6  render props

将一个组件内的 state 作为 props 传递给调用者, 调用者可以动态的决定如何渲染.

这个其实应该拿来和 高阶组件/HOC来对比


3.  通信方式


3.1  单个组件内部传递数据

state

3.2 父组件向子组件传递

props

3.3 子组件向父组件传递

props

3.4 兄弟组件

porps

3.5 父组件向后代组件传递

props

Context API

Redux React Redux Mobx   第三方的

EventBus 和vuex一样 事件总线的概念

发布-订阅模式   自己没试过

3.6 跨级组件

Context API

Redux React Redux Mobx   第三方的

EventBus 和vuex一样 事件总线的概念

发布-订阅模式   自己没试过


4. 有待补充





相关文章
|
7月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
373 0
|
7月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
79 0
|
7月前
|
前端开发
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
82 0
|
7月前
|
存储 前端开发 JavaScript
【第29期】一文学会用React类组件编写组件
【第29期】一文学会用React类组件编写组件
78 0
|
7月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
127 0
|
3月前
|
消息中间件 前端开发
React技术栈-组件间通信的2种方式
本文介绍了React技术栈中组件间通信的两种方式:通过props传递数据和使用消息发布(publish)-订阅(subscribe)机制,并通过实例代码展示了如何使用PubSubJS库实现跨组件通信。
59 11
React技术栈-组件间通信的2种方式
|
6月前
|
存储 前端开发 JavaScript
在React中有效地管理组件之间的通信和数据流
在React中有效地管理组件之间的通信和数据流
|
7月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
52 1
|
7月前
|
前端开发
React组件通信:如何优雅地实现组件间的数据传递
React组件通信:如何优雅地实现组件间的数据传递
201 0
|
7月前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
122 1