React組件(函數組件和類組件)

React組件(函數組件和類組件)

1.創建組建的兩種方式

1.1 函數組件

1.函數組件:使用js函數創建組件;

2.約定:函數名稱必須以大寫字母開頭( React 據此區分 組件 和 普通的React 元素),

3.函數組件必須有返回值,表示該組件的結構;

4.若返回值爲null,表示不渲染任何內容;

5.渲染函數組件:用函數名作爲組件標籤名,組件標籤可以是單標籤也可以是雙標籤;

//函數組件
function App() {
    return (
    	<div>這是函數組件</div>
    )
}
//利用ReactDOM.render()進行渲染
ReactDOM.render(<App/>,document.getElementById('root'))

1.2 類組件

1.類組件:使用ES6的class創建的組件;

2.類名稱必須以大寫字母開頭;

3.類組件應該繼承React.Component父類,從而可以使用父類中提供的方法或屬性;

4.類組件必須提供render()方法;

5.render()方法必須有返回值,表示該組件的結構;

//創建類組件
class App extends React.Component{
    render() {
        return(
        	<div>這是類組件</div>
        )
    }
}
//使用ReactDOM進行渲染
ReactDOM.render(<App/>,document.getElementById('root'))