React中组件的实例介绍

什么是组成，为什么它是你的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" />
}

将方法作为道具传递

例如，一个组件可以专注于跟踪一个点击事件，而当点击事件发生时，实际发生什么则取决于容器组件。

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 属性允许你将组件注入其他组件内部。

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

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

而你以透明的方式将更多的组件嵌入其中。

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

高阶组件

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

你可以在我的文章React高阶组件中了解更多关于高阶组件的信息。