Components 與Props - React

概念上來說，component 就像是JavaScript 的function，它接收任意的參數（稱之為「props」）並且回傳描述畫面的React element。

Function Component 與Class Component. Component使你可以將UI拆分成獨立且可複用的程式碼，並且專注於各別程式碼的思考。

本章節旨在介紹component的相關概念，你也可以在此參閱詳細的API文件。

概念上來說，component就像是JavaScript的function，它接收任意的參數（稱之為「props」）並且回傳描述畫面的Reactelement。

FunctionComponent與ClassComponent 定義component最簡單的方法即是撰寫一個Javascriptfunction： functionWelcome(props){ return

Hello,{props.name}

; } 此function是一個符合規範的Reactcomponent，因為它接受一個「props」（指屬性properties）物件並回傳一個Reactelement。

我們稱之為functioncomponent，因為它本身就是一個JavaScriptfunction。

同樣的，你也可以使用ES6Class來定義component： classWelcomeextendsReact.Component{ render(){ return

Hello,{this.props.name}

; } } 上述兩種component在React中是同等的。

Function和Classcomponent兩者都擁有額外的特性，我們將會在下一個章節探討。

Render一個Component 在此之前，我們只見過這種相當於DOM標籤的Reactelement： constelement=; 不過，Reactelement也可以是使用者自定義的component： constelement=; 當React看到由使用者定義component的element時，它將JSX屬性和children作為singleobject傳遞給該component。

我們稱這個object為「props」。

舉例來說，這段程式碼會在頁面上render出「Hello,Sara」： functionWelcome(props){return

Hello,{props.name}

; } constroot=ReactDOM.createRoot(document.getElementById('root')); constelement=;root.render(element); 在CodePen上試試看吧！ 讓我們來複習一下這個例子發生了什麼事： 我們對這個element呼叫了root.render()。

React以{name:'Sara'}作為props傳入Welcomecomponent並呼叫。

Welcomecomponent回傳了

Hello,Sara

這個element作為返回值。

ReactDOM有效的將DOM更新為

Hello,Sara

。

注意：Component的字首須為大寫字母 React會將小寫字母開頭的組件視為原始DOM標籤，舉例來說，就會被視為是HTML的div標籤，但是則是一個component，而且需要在作用域中使用Welcome。

想要了解更多關於此慣例的原因，請參閱JSXInDepth章節。

組合Component Component可以在輸出中引用其他component。

我們可以在任何層次中抽象化相同的component，按鈕、表單、對話框、甚至是整個畫面，在React應用程式中都將以component的方式呈現。

舉例來說，我們可以建立一個render多次Welcome的Appcomponent： functionWelcome(props){ return

Hello,{props.name}

; } functionApp(){ return( ); } 在CodePen上試試看吧！ 通常來說，每個React應用程式都有一個最高層級的Appcomponent。

然而，如果你將React結合至現存的應用程式中，你可能需要使用像Button這樣的小型component，並由下往上，逐步應用到畫面的最高層級。

抽離Component 別害怕將component拆分成更小的component。

舉例來說，我們看這個Comment的component： functionComment(props){ return( {props.author.name} {props.text} {formatDate(props.date)} ); } 在CodePen上試試看吧！ 它接受author(一個物件)、text(一個字串)、還有date(一個日期)作為它的props。

它的作用是在一個社交網站上render一則評論。

這個component可能因為太多的巢狀關係而難以更動，而且也難以複用獨立的部分。

讓我們把一些component從中分離吧。

首先,我們將Avatar分離出來： functionAvatar(props){ return( ); } 這個Avatar並不需知道它會被render在Comment中。

這是為什麼我們給他一個更為一般的名字：user而不是author。

我們建議從component的角度為props命名，而不是它的使用情境。

現在我們可以稍微簡化Comment： functionComment(props){ return( {props.author.name} {props.text} {formatDate(props.date)} ); } 接下來，我們將UserInfocomponent也抽離出來，它會在使用者名稱旁邊renderAvatarcomponent： functionUserInfo(props){ return( {props.user.name}); } 讓我們將Comment更加簡化： functionComment(props){ return( {props.text} {formatDate(props.date)} ); } 在CodePen上試試看吧！ 在一開始，將component抽離出來可能是一件繁重的工作，但是在較大的應用程式中，建構可複用的component是非常值得。

以經驗來說，如果一個UI中有一部分會被重複使用很多次（Button、Panel、Avatar），或者它足夠複雜（App、FeedStory、Comment），則可以將它提取到獨立的component。

Props是唯讀的 不管你使用function或是class來宣告component，都絕不能修改自己的props。

例如這個sumfunction： functionsum(a,b){ returna+b; } 像這樣的function是Purefunction的，因為他們並沒有改變輸入，而且相同的輸入總是回傳一樣的結果。

相反地，這個function並非Purefunction，因為它更改了它的參數： functionwithdraw(account,amount){ account.total-=amount; } React是很彈性的，但有一條嚴格的規定： 所有的Reactcomponent都必須像Purefunction一般保護他的props 當然，應用程式的UI是動態的，而且總是隨著時間改變。

在下個章節，我們會介紹一個新的概念「state」。

State可以在不違反上述規則的前提下，讓Reactcomponent隨使用者操作、網路回應、或是其他方式改變輸出內容。

Isthispageuseful?Editthispage安裝開始將React加入到網頁建立全新的React應用程式CDN連結ReleaseChannels主要概念1.HelloWorld2.JSX介紹3.RenderingElement4.Component與Prop5.State和生命週期6.事件處理7.條件Render8.列表與Key9.表單10.提升State11.Compositionvs繼承12.用React思考進階指南無障礙Code-SplittingContext錯誤邊界ForwardingRefsFragmentHigher-OrderComponent整合其他函式庫深入JSX最佳化效能PortalsProfiler沒有ES6的React沒有JSX的ReactReconciliationRefs和DOMRenderProps靜態型別檢查嚴格模式TypecheckingWithPropTypesUncontrolledComponentWebComponentAPI參考ReactReact.ComponentReactDOMReactDOMClientReactDOMServerDOMElementSyntheticEvent測試工具TestRendererJS環境要求術語表Hooks1.Hook介紹2.Hook概觀3.使用StateHook4.使用EffectHook5.Hook的規則6.打造你自己的Hook7.HookAPI參考8.Hook常見問題測試測試概觀測試方法測試環境貢獻如何貢獻Codebase概觀實現說明設計原則FAQAJAX和APIBabel、JSX和構建步驟傳遞Function到ComponentComponentState樣式和CSS檔案結構版本控制政策VirtualDOM和InternalsPreviousarticleRenderingElementNextarticleState和生命週期