【51CTO.com快译】每个React应用都是由交互组件组成的。这些组件如何通信是UI体系结构的一个重要一环。随着应用程序变得更大、更复杂，组件交互变得更加重要。
React提供了多种方法来处理这种需求，每种方法都有其相应的用例。这次让我们从最简单的亲子互动方法开始。
亲子与道具
组件之间最简单的通信形式是通过属性——通常称为道具（Props）。Props是由父组件传递给子组件的参数，类似于函数的参数。
Props允许将变量传递给子节点，当值发生更改时，它们会在子节点中自动更新，如Listing 1所示。
Listing 1. Props (class-based)：
function App(){
return <div>
<AppChild name="Matt" />
</div>
}
function AppChild(props){
return <span>
My name is {props.name}
</span>
}
ReactDOM.render(<App />, document.getElementById('app'));Listing 1显示了如何在基于函数的组件树中处理props。这个过程与类类似。这个基于函数的示例展示了函数样式的更精简的语法。
带功能道具的子-父组件
Listing 1允许将值从父级传递给子级。当子节点需要更新父节点的变更时，它们不能仅修改属性。
如果你试图直接修改子进程的prop，你会在控制台中看到以下类型的错误:
Uncaught TypeError: Cannot assign to read only property 'foo' of object '#<Object>'
相反，父进程可以传入一个功能性道具，子进程可以调用这个函数。这种功能道具是一种面向事件的编程。您可以在Listing 2中看到这一点。
Listing 2. Functional props
function App(){
const [name, setName] = React.useState("Matt");
return <div>
<AppChild name={name} onChangeName={()=>{setName("John")}}/>
</div>
}
function AppChild(props){
return <span>
My name is {props.name}
<button onClick={props.onChangeName}>Change Name</button>
</span>
}
ReactDOM.render(<App />, document.getElementById('app'));Listing 2介绍了用于管理状态的useState。这是一个简单的机制。functional prop的本质是当按钮被点击时，App组件传入的函数就会被执行。这样，就实现了子-父通信。
总的来说，要记住的概念是：道具流向子级，事件流向父级。这是一个有价值的设计原则，有助于保持应用程序的组织性和可管理性。
向父级传递信息
通常情况下，子组件需要随它们的事件一起传递参数。这可以通过向函数道具回调添加参数来实现。如Listing 3所示。
function App(){
const [name, setName] = React.useState("Matt"); //test
return <div>
<AppChild name={name} onChangeName={(newName)=>{setName(newName)}}/>
</div>
}
function AppChild(props){
return <span>
My name is {props.name}
<button onClick={()=>props.onChangeName("Bill")}>Change Name</button>
</span>
}
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
// In the route definition:
<Route path=’/foopath’ render={(props) => <Child {…props} />} />
// In the child component:
<Route appProps={{ onTitleChange }} />
从本质上讲，Listing 4通过覆盖路由的呈现方式允许直接传递属性。
同级沟通
到目前为止，我们看到的特性提供了处理同级通信的能力。这在React文档中被称为“提升状态”。
这里的思想是，当组件树的同一级别的子组件必须共享状态时，该状态将被推入父组件。然后父级通过道具将状态分享给需要它的子级。子节点引发事件以更新父节点的状态，这将自动在共享属性中反映出来。
React Context API
React本身提供的另一个选项是Context API。Context API被设计用来管理简单的、有全局意义的值。也就是说，这些值被应用程序中的许多组件使用。
文档中给出的示例是一个主题设置。许多组件将会对这种设置感兴趣(为了反映适当的主题)，这与道具一起传递非常困难。
Context API不用于处理复杂的应用程序数据，它是专门针对在深度嵌套的组件中避免复杂的道具处理的。Listing 5给出了一个简单的示例。
Listing 5. Context API
// defining the context value
<ThemeContext.Provider value="dark">
// Consuming the context value later on
<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之类的更复杂的选项可以解决这些更复杂的需求。
【51CTO译稿，合作站点转载请注明原文译者和出处为51CTO.com】
