react 概念_React概念：组成

react 概念

In programming, composition allows you to build more complex functionality by combining small and focused functions.

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

For example, think about using map() to create a new array from an initial set, and then filtering the result using filter():

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

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

In React, composition allows you to have some pretty cool advantages.

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

You create small and lean components and use them to compose more functionality on top of them. How?

您可以创建小型且精简的组件，并使用它们在它们之上构成更多的功能。 怎么样？

创建组件的专用版本 (Create specialized version of a component)

Use an outer component to expand and specialize a more generic component:

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

const Button = props => {
  return <button>{props.text}</button>
}

const SubmitButton = () => {
  return <Button text="Submit" />
}

const LoginButton = () => {
  return <Button text="Login" />
}

通过方法作为道具 (Pass methods as props)

A component can focus on tracking a click event, for example, and what actually happens when the click event happens is up to the container component:

例如，组件可以专注于跟踪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} />
}

使用孩子 (Using children)

The props.children property allows you to inject components inside other components.

props.children属性使您可以将组件注入其他组件中。

The component needs to output props.children in its JSX:

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

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

and you embed more components into it in a transparent way:

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

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

高阶组件 (Higher order components)

When a component receives a component as a prop and returns a component, it’s called higher order component.

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

You can learn more about higher order components on my article React Higher Order Components.

您可以在我的文章React Higher Order Components上了解有关高阶组件的更多信息。

翻译自: https://flaviocopes.com/react-composition/

react 概念