反應概念:組成

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

高階組件

當一個組件接收一個組件作為道具並返回一個組件時,它稱為高階組件。

您可以在我的文章中了解有關高階組件的更多信息反應高階組件

免費下載我的反應手冊


更多反應教程: