反应概念：组成

什么是合成，为什么它是您的React应用程序中的关键概念

在编程中，组合使您可以通过组合小的和集中的功能来构建更复杂的功能。

例如，考虑使用map()从初始集合创建一个新数组，然后使用过滤结果filter()：

const list = ['Apple', 'Orange', 'Egg']
list.map(item => item[0]).filter(item => item === 'A') //'A'

在React中，组合使您具有一些非常酷的优势。

您可以创建小型且精益的组件，并使用它们来撰写在它们之上有更多功能。如何？

创建组件的专用版本

使用外部组件可以扩展和专用化更通用的组件：

const Button = props => {
  return <button>{props.text}</button>
}
const SubmitButton = () => {
return <Button text=“Submit” />
}
const LoginButton = () => {
return <Button text=“Login” />
}

通过方法作为道具

例如，组件可以专注于跟踪click事件，而单击事件发生时实际发生的事情取决于容器组件：

const Button = props => {
  return <button onClick={props.onClickHandler}>{props.text}</button>
}
const LoginButton = props => {
return <Button text=“Login” onClickHandler={props.onClickHandler} />
}
const Container = () => {
const onClickHandler = () => {
alert(‘clicked’)
}
return <LoginButton onClickHandler={onClickHandler} />
}

使用孩子

这props.children属性允许您将组件注入其他组件内部。

组件需要输出props.children在其JSX中：

const Sidebar = props => {
  return <aside>{props.children}</aside>
}

并且您以透明的方式将更多组件嵌入其中：

<Sidebar>
  <Link title="First link" />
  <Link title="Second link" />
</Sidebar>

高阶组件

当一个组件接收一个组件作为道具并返回一个组件时，它称为高阶组件。

您可以在我的文章中了解有关高阶组件的更多信息反应高阶组件。