> For the complete documentation index, see [llms.txt](https://react-native.books.c-k.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://react-native.books.c-k.dev/component-and-props/what-is-compoent/class-base-components.md).

# Class-base components

Functional Component must return some amount of JSX object.

Class based components is mainly for dynamic sources of data.

![](https://3241674717-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L_DfhjIgb2njPA7L1mD%2F-L_QV4NAs3mwH3vSlAfL%2F-L_QWFanFYa_qVIUv9LD%2Fimage.png?alt=media\&token=4d17bc02-1242-4e52-a765-c497eb11e4d7)

Class Component has a life-cycle methods, function that placed on out class that will be automatically called at some point. 

* [组件生命周期](https://fraserxu.me/intro-to-react/react-component-lifecycle/)
* [React.Component - React](https://reactjs.org/docs/react-component.html)

We can define a method on the class

* `componentWillMount()`
* `componentDidMount()`
* `componentWillReceiveProps`
* `shouldComponentUpdate`
* `componentWillUpdate`
* `componentDidUpdate` 
* `componentWillUnmount`