首页 > 其他分享 >你不应该从一个 Model 组件暴露出 {open, close} 这样的命令式句柄,最好是像 这样,将 isOpen 作为一个 prop。为什么这样要求?

你不应该从一个 Model 组件暴露出 {open, close} 这样的命令式句柄,最好是像 这样,将 isOpen 作为一个 prop。为什么这样要求?

时间:2024-02-05 12:14:42浏览次数:28  
标签:isOpen 句柄 prop 命令式 Modal 组件

你不应该从一个 Model 组件暴露出 {open, close} 这样的命令式句柄,最好是像 这样,将 isOpen 作为一个 prop。为什么这样要求?

在React和现代UI开发中,遵循声明式编程范式通常被认为是一种最佳实践。暴露命令式的句柄(如openclose方法)会导致组件之间产生更紧耦合的关系,并且破坏了数据驱动视图的原则。

以下几点解释了为什么推荐使用isOpen这样的props而不是命令式句柄:

  1. 声明式编程

    • 通过将isOpen作为prop传递给Modal组件,你只需关心当前的isOpen值是什么,而无需关心如何打开或关闭Modal。这样可以让组件更加专注于描述其状态,而非具体操作过程。
  2. 数据驱动

    • 当父组件控制isOpen的状态时,它可以根据需要更新这个值来直接反映Modal是否应该显示。这种方式下,Modal组件只是一个纯粹的展示层,根据传入的props来决定渲染内容,这符合React的数据驱动思想。
  3. 降低耦合度

    • 如果Modal组件暴露出命令式句柄,那么调用这些句柄的组件就必须知道Modal内部是如何工作的,以及如何处理状态变化。相反,如果只通过props传递状态,外部组件就不需要了解Modal组件的具体实现细节,从而降低了两者之间的耦合度。
  4. 易于测试和维护

    • 声明式的组件更容易进行单元测试,因为它们的行为完全依赖于输入(props),而不涉及内部执行的具体逻辑。同时,代码也更易于理解和维护。
  5. 更好的可组合性

    • 声明式的组件可以更好地与其他组件结合在一起,因为你只需要正确设置props就能得到预期的结果,这对于构建大型应用和复用组件库尤其重要。

综上所述,将isOpen作为prop传递给Modal组件体现了React中声明式、数据驱动的设计理念,能够提升代码的清晰度、可维护性和可扩展性。

标签:isOpen,句柄,prop,命令式,Modal,组件
From: https://www.cnblogs.com/longmo666/p/18007714

相关文章

  • Yield Keyword, classmethod and static method, and Property Method in Python
    ReferenceWhatisYieldKeywordinPythonPython'syieldkeywordislikeanotheroneweusetoreturnanexpressionorobject,typicallyinfunctions,calledreturn.Thereisasmallamountoffluctuation,though.Theyieldstatementofafunctionre......
  • Spring-Boot框架配置YAML整合Redis代替properties文件------Spring-Boot框架
    packagecom.example.boot3.controller;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.data.redis.core.StringRedisTemplate;importorg.springframework.web.bind.annotation.GetMapping;importorg.springframework.we......
  • wpf 数据绑定 INotifyPropertyChanged封装
    BindableBase.cspublicabstractclassBindableBase:INotifyPropertyChanged{publiceventPropertyChangedEventHandlerPropertyChanged;//调用方法:publicstringName{get=>name;set{SetProperty<string>(refname,value);}}......
  • android setprop getprop, 调整app heap 堆 大小
    网上的截图: 通过setprop设置的更改的属性,重启之后就会消失。 调整app堆大小。      一些基本的了解。  ......
  • 解决proplot和Matplotlib版本冲突问题
    非原创,但忘记来源了,原作者看到请评论或后台联系我添加版权在环境内运行PY代码importimportlibimportosimportreimportsubprocessimportsysimportlogginglogging.basicConfig(level=logging.DEBUG,format='%(asctime)s-%(levelname)s-%(message)s')#Ju......
  • vue父子组件数据传递props中Object和Array如何设置默认值
      props:{field:{type:String},index:{type:Number,default:0},isAble:{type:Boolean,default:true},rowData:{type:Object,default:function(){return{};......
  • 方法句柄API使用
    基本使用步骤第一步,构造要调用方法的MethodType,由返回值类型+参数列表类型组成。第二步,获取Lookup实例,一般使用MethodHandles类中提供的静态方法获取,最常用的MethodHandles.lookup()。第三步,调用Lookup实例的findXXX方法获取到MethodHandle,即方法句柄。主要有findConstructor......
  • 无涯教程-Swift - Properties(属性)
    Swift4语言为类,枚举或结构提供属性以关联值。存储属性Swift4引入了存储属性的概念来存储常量和变量的,常量的存储属性由'let'关键字定义,变量的存储属性由'var'关键字定义。在定义期间,存储的属性提供"默认值"初始化期间,用户可以初始化和修改初始值structNumber{var......
  • 神经网络优化篇:详解为超参数选择合适的范围(Using an appropriate scale to pick hyper
    为超参数选择合适的范围假设要选取隐藏单元的数量\(n^{[l]}\),假设,选取的取值范围是从50到100中某点,这种情况下,看到这条从50-100的数轴,可以随机在其取点,这是一个搜索特定超参数的很直观的方式。或者,如果要选取神经网络的层数,称之为字母\(L\),也许会选择层数为2到4中的某个值,接着顺......
  • ChatGPT无法登录报错something went wrong. please make sure your device's date and
    这两天Android在登陆ChatGPT的时候,出现错误:somethingwentwrong.pleasemakesureyourdevice'sdateandtimearesetproperly如下图:这个问题就出现的非常蹊跷,于是我在网上搜索了一圈,很多的教程都指向节点网络问题,但是我的Hostease网络确定没有问题,因此这个问题就快无解了,正......