?

組件概述

?

組件可以將UI切分成一些獨立的、可復用的部件，這樣你就只需專注于構建每一個單獨的部件。

組件從概念上看就像是函數，它可以接收任意的輸入值（稱之為“props”），并返回一個需要在頁面上展示的React元素。

提取組件一開始看起來像是一項單調乏味的工作，但是在大型應用中，構建可復用的組件完全是值得的。當你的UI中有一部分重復使用了好幾次，或者其自身就足夠復雜，類似這些都是抽象成一個可復用組件的絕佳選擇，這也是一個比較好的做法。

?

組件定義

?

1 函數定義組件

?

function Welcome(props) {return <h1>Hello, {props.name}</h1>; }

?

2 類定義組件

?

class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>; } }

?

3 createElement

?

語法

?

React.createElement(type,[props],[...children] )

?

代碼

?

const title = React.createElement('div',{sport:'football'},[<div key="program">天下足球</div>,<div key="comment">留給中國隊的時間不多了</div> ] ); ReactDOM.render(title,document.getElementById('root'));

?

說明

?

1 所有的React組件必須像純函數那樣使用它們的props。

? props是只讀的。無論是使用函數或是類來聲明一個組件，它決不能修改它自己的props，否則會拋異常。

2 使用類定義組件，可以使用組件的其它特性：局部狀態（state屬性）、生命周期鉤子等。

?

轉載于:https://www.cnblogs.com/sea-breeze/p/10251221.html

總結

以上是生活随笔為你收集整理的创建React组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。