Added info on nesting functional components (#19131)

This commit is contained in:
Lucas Gurgel
2018-10-15 23:41:02 -04:00
committed by Quincy Larson
parent 49f5b96d4c
commit 282ff3d4b7

View File

@ -28,11 +28,39 @@ Functional components are simpler. They don't manage their own state or have acc
```js
const PageOne = () => {
return (
<h1>Page One</h1>
<Text>Page One</Text>
);
}
```
Note that its immediate parent doesn't necessarily have to be a Class component. It could just be another stateless one, which allows for better componentization. Here's an example.
```js
const SecondComponent = () => {
return <Text>Hello World</Text>
}
const FirstComponent = () => {
return (
<View>
<SecondComponent />
</View>
)
}
class App extends Component {
render () {
return <FirstComponent />
}
}
```
We're not doing all that much here. `App` is a class component that renders `FirstComponent`, which is just a functional component that returns `SecondComponent` inside of a `View`.
Obviously, if the goal was just to render a `Text` component that said "Hello World", you wouldn't need `FirstComponent` nor `SecondComponent`. But the purpose of this example is to show how one might go about nesting functional components.
Sometimes, a functional component may contain a lot of markup for its configuration. For example, the `TextInput` component can be customized with many attributes, so you may want to create custom components for different fields like email, password, username and so on. That is a powerful concept, as you're now able to reuse these custom components throughout your application.
### Summary
Class components are used as container components to handle state management and wrap child components. Functional components generally are just used for display purposes - these components call functions from parent components to handle user interactions or state updates.