挑战 React 第八篇

目录

什么是组件?

如何用组件达成程式码重複使用?

两种组件种类

学习心得

什么是组件?

Component，中文翻译为组件，我一开始在学推测它可能像是一个零件去组成一个完整的东西且可以被重複使用。

实际举例一个网页画面，假设有Header / Footer / SideNav / Main Content这四大类(四个组件)，每一个组件都是 UI 所构成，如同下面示意图：

整个画面匡起来会由一个App最外层组件，透过 React Dom一层一层的传递下去，请看下面示意图。

透过root节点创立一个React element叫做 App 的组件，而这个 App 组件由四个组件所构成。示意图转化成程式码範例：

function App() {  return (    <div>      <Header/>      <SideNav/>      <MainContent/>      <Footer/>    </div>  );}ReactDOM.render(  <App/>,  document.getElementById('root'));

如何用组件达成程式码重複使用

我们已经知道每个组件都是一个 UI ，假设我现在想要重複利用已经有的 SideNav。本来只有左边有，现在我右边也想放置一个SideNav，怎么做到？

下面为示意图

示意图转化成程式码範例：

function App() {  return (    <div>      <Header/>      <SideNav/>      <MainContent/>           <SideNav/>      <Footer/>    </div>  );}ReactDOM.render(  <App/>,  document.getElementById('root'));

两种组件种类

这边先给大家看看大概的差异，下篇再详细讲两者的差别。

学习心得

直到看了官网还有其他技术文章介绍 Component，我才真正理解原来每一个组件都是一个 UI ，所以之后做一个新专案，可以先这样的方式拆解每一个画面，最后变成一个个组件。