如何在React中处理组件交互？

Posted 2021-09-28 妙蛙种子

每个React应用都是由交互组件组成的。这些组件如何通信是UI体系结构的一个重要一环。随着应用程序变得更大、更复杂，组件交互变得更加重要。

React提供了多种方法来处理这种需求，每种方法都有其相应的用例。这次让我们从最简单的亲子互动方法开始。

亲子与道具

组件之间最简单的通信形式是通过属性——通常称为道具（Props）。Props是由父组件传递给子组件的参数，类似于函数的参数。

Props允许将变量传递给子节点，当值发生更改时，它们会在子节点中自动更新，如Listing 1所示。

Listing 1. Props (class-based)：

1. function App(){ 
2. return <div> 
3. <AppChild name="Matt" /> 
4. </div> 
5. } 
6. function AppChild(props){ 
7. return <span> 
8. My name is {props.name} 
9. </span> 
10. } 
11. ReactDOM.render(<App />, document.getElementById(\'app\')); 

Listing 1显示了如何在基于函数的组件树中处理props。这个过程与类类似。这个基于函数的示例展示了函数样式的更精简的语法。

带功能道具的子-父组件

Listing 1允许将值从父级传递给子级。当子节点需要更新父节点的变更时，它们不能仅修改属性。

如果你试图直接修改子进程的prop，你会在控制台中看到以下类型的错误:

1. Uncaught TypeError: Cannot assign to read only property \'foo\' of object \'#<Object>\' 

相反，父进程可以传入一个功能性道具，子进程可以调用这个函数。这种功能道具是一种面向事件的编程。您可以在Listing 2中看到这一点。

Listing 2. Functional props

1. function App(){ 
2. const [name, setName] = React.useState("Matt"); 
3. return <div> 
4. <AppChild name={name} onChangeName={()=>{setName("John")}}/> 
5. </div> 
6. } 
7. function AppChild(props){ 
8. return <span> 
9. My name is {props.name} 
10. <button onClick={props.onChangeName}>Change Name</button> 
11. </span> 
12. } 
13. ReactDOM.render(<App />, document.getElementById(\'app\')); 

Listing 2介绍了用于管理状态的useState。这是一个简单的机制。functional prop的本质是当按钮被点击时，App组件传入的函数就会被执行。这样，就实现了子-父通信。

总的来说，要记住的概念是：道具流向子级，事件流向父级。这是一个有价值的设计原则，有助于保持应用程序的组织性和可管理性。

向父级传递信息

通常情况下，子组件需要随它们的事件一起传递参数。这可以通过向函数道具回调添加参数来实现。如Listing 3所示。

1. function App(){ 
2. const [name, setName] = React.useState("Matt"); //test 
3. return <div> 
4. <AppChild name={name} onChangeName={(newName)=>{setName(newName)}}/> 
5. </div> 
6. } 
7. function AppChild(props){ 
8. return <span> 
9. My name is {props.name} 
10. <button onClick={()=>props.onChangeName("Bill")}>Change Name</button> 
11. </span> 
12. } 
13. ReactDOM.render(<App />, document.getElementById(\'app\')); 

注意 Listing 3中的 onClick={()=>props.onChangeName("Bill")}行。这里，我们使用箭头语法创建一个匿名函数，其中包含我们想要的参数。传递一个由组件本身修改的变量也很简单，语法如下：onClick={(myVar)=>prop . onchange (myVar)}。

顺便说明一下，作为事件处理程序的内联箭头函数有时会因为性能问题而受到批评，尽管这可能被夸大其词。

功能道具和React Router

另一个重要的用例是在 React Router 之间传递参数。Listing 4提供了如何实现这一点的示例。

Listing 4. Passing functional props through Router

1. // In the route definition: 
2. <Route path=’/foopath’ render={(props) => <Child {…props} />} /> 
3. // In the child component: 
4. <Route appProps={{ onTitleChange }} /> 

从本质上讲，Listing 4通过覆盖路由的呈现方式允许直接传递属性。

同级沟通

到目前为止，我们看到的特性提供了处理同级通信的能力。这在React文档中被称为“提升状态”。

这里的思想是，当组件树的同一级别的子组件必须共享状态时，该状态将被推入父组件。然后父级通过道具将状态分享给需要它的子级。子节点引发事件以更新父节点的状态，这将自动在共享属性中反映出来。

React Context API

React本身提供的另一个选项是Context API。Context API被设计用来管理简单的、有全局意义的值。也就是说，这些值被应用程序中的许多组件使用。

文档中给出的示例是一个主题设置。许多组件将会对这种设置感兴趣(为了反映适当的主题)，这与道具一起传递非常困难。

Context API不用于处理复杂的应用程序数据，它是专门针对在深度嵌套的组件中避免复杂的道具处理的。Listing 5给出了一个简单的示例。

Listing 5. Context API

1. // defining the context value 
2. <ThemeContext.Provider value="dark"> 
3. // Consuming the context value later on 
4. <Button theme={this.context} />; 

Redux的集中状态

更复杂的应用程序可能需要更复杂的状态架构。在React中处理这个问题最常见的库仍然是Redux。Redux不仅仅是一个集中式存储，它更是一个自以为是的结构化事件系统。

Redux的核心思想是，组件通过称为dispatchers的特殊对象引发事件(在Redux中称为动作)。这些动作事件由reducer观察到，然后reducer将动作应用到状态。然后，视图中的组件会自动更新以反映状态。

从这段简短的描述可以看出，Redux为您的应用程序引入了相当多的复杂性和正式性。在使用Redux时，这应该与结构化和可理解性的好处进行谨慎的平衡。

还有其他管理集中商店的方法，包括MobX等。尽管这些解决方案可能比Redux有优势，但必须权衡Redux的流行所带来的优势，即熟悉度和了解它的开发人员的可用性。

React通过props和function props提供了非常强大和简单的组件交互。在更大，更复杂的应用程序中，这种方法可能会崩溃。利用诸如Context API和Redux之类的更复杂的选项可以解决这些更复杂的需求。