Pure Components

A function component is considered pure when the returned Html is deterministically derived from its props, and its view function mutates no state or has other side-effects.

For example below is a pure component. For a given prop is_loading it will always result in the same Html without any side effects.

1. use yew::{Properties, function_component, Html, html};

3. #[derive(Properties, PartialEq)]
4. pub struct Props {
5. pub is_loading: bool,
6. }

8. #[function_component]
9. fn HelloWorld(props: &Props) -> Html {
10. if props.is_loading {
11. html! { "Loading" }
12. } else {
13. html! { "Hello world" }
14. }
15. }

备注

If you have an internal pure component that makes no use of hooks and other component machinery, you can often write it instead as a normal function returning Html and avoid a bit of overhead for Yew, related to running the component lifecycle. Use expression syntax to render them in html!.

Impure components

You might wonder if a component can be impure if it does not use any globals, since its just a function that is called every render. This is where the next topic comes in - hooks