美文网首页现代前端指南!
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 通信方式-组件创建方式总结

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