反应概念:组成

什么是合成,为什么它是您的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>

高阶组件

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

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

免费下载我的反应手册


更多反应教程: