当前位置： 首页 > 科技观察

React中如何处理组件交互？

时间：2023-03-16 00:59:58 科技观察

【.com速译】每个React应用都是由交互组件组成的。这些组件如何通信是UI架构的重要组成部分。随着应用程序变得越来越大和越来越复杂，组件交互变得越来越重要。React提供了多种方式来处理这种需求，每种方式都有相应的用例。这次就从最简单的亲子互动方式说起吧。父组件和道具组件之间最简单的通信形式是通过属性——通常称为道具。Props是从父组件传递给子组件的参数，类似于函数参数。Props允许将变量传递给子节点，当值发生变化时它们会在子节点中自动更新，如清单1所示。清单1.Props（基于类）：functionApp(){return

}functionAppChild(props){return我的名字是{props.name}}ReactDOM.render(,document.getElementById('app'));清单1显示了如何在基于函数的组件树中处理props。这个过程类似于类。这个基于函数的示例演示了函数式样式的更紧凑语法。带有函数props的子-父组件清单1允许从父到子传递值。当子节点需要更新父节点变化时，不能只修改属性。如果您尝试直接修改孩子的prop，您将在控制台中看到以下类型的错误：UncaughtTypeError:Cannotassigntoreadonlyproperty'foo'ofobject'#'Instead,theparentprocesscanpass在Functionalprops中，子进程可以调用这个函数。这种函数道具是一种面向事件的编程。您可以在清单2中看到这一点。清单2.功能性道具functionApp(){const[name,setName]=React.使用状态（“马特”）;return
{setName("John")}}/>
}functionAppChild(props){return我叫{props.name}更改名称}ReactDOM。render(,document.getElementById('app'));清单2介绍了用于管理状态的useState。这是一个简单的机制。Functionalprop的本质是当按钮被点击时，App组件传入的函数会被执行。这样就实现了亲子交流。总的来说，要记住的概念是：props流向children，event流向parent。这是一个有价值的设计原则，有助于保持应用程序的组织性和可管理性。将信息传递给父级通常，子组件需要将参数与其事件一起传递。这可以通过向函数props回调中添加参数来实现。如清单3所示。函数App(){const[name,setName]=React.useState("Matt");//testreturn
{setName(newName)}}/>
}functionAppChild(props){return我叫{props.nameprops.onChangeName("Bill")}>更改名称}ReactDOM.render(,document.getElementById('app'));请注意清单3中的onClick={()=>props.onChangeName("Bill")}行。在这里，我们使用箭头语法创建一个带有所需参数的匿名函数。传递一个由组件自己修改的变量也很简单，语法如下：onClick={(myVar)=>prop.onchange(myVar)}。顺便说一句，作为事件处理程序的内联箭头函数有时会因性能问题而受到批评，尽管这可能被夸大了。函数props和ReactRouter的另一个重要用例是在ReactRouter之间传递参数。清单4提供了如何执行此操作的示例。清单4.通过Router传递功能性道具//在路由定义中：}//在子组件中：本质上，清单4允许通过覆盖路由的呈现方式来直接传递属性。PeerCommunication到目前为止我们看到的特性提供了处理peercommunication的能力。这在React文档中称为“提升状态”。这里的想法是，当组件树同一级别的子组件必须共享状态时，该状态被推送到父组件中。然后父母通过道具将状态分享给需要它的孩子。子节点引发事件以更新父节点的状态，这会自动反映在共享属性中。ReactContextAPIReact本身提供的另一个选项是ContextAPI。上下文API旨在管理简单的、全局有意义的值。也就是说，这些值被应用程序中的许多组件使用。文档中给出的示例是主题设置。许多组件会对这种设置感兴趣（以反映适当的主题），这很难与props一起传递。ContextAPI不是为处理复杂的应用程序数据而设计的，它专门用于避免在深度嵌套的组件中处理复杂的props。清单5给出了一个简单的示例。清单5.上下文API//定义上下文值//稍后使用上下文值;Redux的集中状态用于更复杂的应用程序可能需要更复杂的状态架构。在React中处理这个问题的最常见的库仍然是Redux。Redux不仅仅是一个集中式存储，它还是一个固执己见的结构化事件系统。Redux的核心思想是组件通过称为调度程序的特殊对象引发事件（在Redux中称为动作）。这些动作事件由减速器观察，然后将动作应用于状态。然后视图中的组件会自动更新以反映状态。从这个简短的描述中可以看出，Redux给您的应用程序带来了相当多的复杂性和正式性。在使用Redux时，应该仔细平衡这与结构和可理解性的好处。还有其他管理中心化商店的方法，包括MobX等。虽然这些解决方案可能比Redux有优势，但必须权衡Redux流行的优势与理解它的开发人员的熟悉度和可用性。React通过props和函数props提供了非常强大和简单的组件交互。在更大、更复杂的应用程序中，这种方法可能会失败。利用ContextAPI和Redux等更复杂的选项可以满足这些更复杂的需求。【翻译稿件，合作网站转载请注明原译者和出处.com】

React中如何处理组件交互？相关文章
最新推荐
猜你喜欢

Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。