美文网首页现代前端指南!
react 通信方式-组件创建方式总结

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

作者: 云高风轻 | 来源:发表于2021-12-01 09:57 被阅读0次

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. 有待补充


参考资料


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉

相关文章

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

    1. 前言 单个的知识点比较散,文章也比较多了,这篇就针对常用的东西,来个总结性的文章 2. 创建组件的方式 2....

  • React Native 的组件通信方式

    React Native 的组件通信方式 React Native 的...

  • React组件通信的几种方式--TypeScript

    React组件通信的几种方式--TypeScript 通过todoList示例进行学习,首先创建基于TypeScr...

  • 总结

    React组件之间的通信方式 1.父组件向子组件通信 React数据流动是单向的,通过props传递 2.子组件向...

  • React-组件通信方式总结

    组件间的关系 父子组件:props兄弟组件(非嵌套组件):消息订阅-发布、集中式管理、events包祖孙组件(跨级...

  • React创建组件

    一、 React创建组件的三种方式及其区别 React推出后,出于不同的原因先后出现三种定义react组件的方式,...

  • 干货博客集

    基础 webpack4.x 入门一篇足矣 react组件通信方式汇总 vue组件之间的通信 原生小程序组件通信 w...

  • React创建组件的三种方式及其区别

    React创建组件的三种方式及其区别 React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同...

  • 无标题文章

    React创建组件的三种方式及其区别 React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同...

  • React中Component和PureComponnt组件的区

    两种组件的声明方式,都可以创建React组件import React,{Component,PureCompone...

网友评论

    本文标题:react 通信方式-组件创建方式总结

    本文链接:https://www.haomeiwen.com/subject/rdqsxrtx.html