Merge branch 'master' into jk/docs

This commit is contained in:
Jonathan Kelley committed 2022-01-28 00:21:42 -05:00
commit 0592cdb135
111 files changed
+3939 -2077

No files matched your search

+5 -5
View File
@@ -1,5 +1,5 @@
# Hooks and Internal State
In the [Adding Interactivity](./interactivity.md) section, we briefly covered the concept of hooks and state stored internal to components.
In this section, we'll dive a bit deeper into hooks, exploring both the theory and mechanics.
@@ -10,7 +10,7 @@ In this section, we'll dive a bit deeper into hooks, exploring both the theory a
Over the past several decades, computer scientists and engineers have long sought the "right way" of designing user interfaces. With each new programming language, novel features are unlocked that change the paradigm in which user interfaces are coded.
Generally, a number of patterns have emerged, each with their own strengths and tradeoffs.
Generally, a number of patterns have emerged, each with their own strengths and tradeoffs.
Broadly, there are two types of GUI structures:
@@ -21,7 +21,7 @@ Typically, immediate-mode GUIs are simpler to write but can slow down as more fe
Many GUIs today are written in *Retained mode* - your code changes the data of the user interface but the renderer is responsible for actually drawing to the screen. In these cases, our GUI's state sticks around as the UI is rendered. To help accommodate retained mode GUIs, like the web browser, Dioxus provides a mechanism to keep state around.
> Note: Even though hooks are accessible, you should still prefer to one-way data flow and encapsulation. Your UI code should be as predictable as possible. Dioxus is plenty fast, even for the largest apps.
> Note: Even though hooks are accessible, you should still prefer one-way data flow and encapsulation. Your UI code should be as predictable as possible. Dioxus is plenty fast, even for the largest apps.
## Mechanics of Hooks
In order to have state stick around between renders, Dioxus provides the `hook` through the `use_hook` API. This gives us a mutable reference to data returned from the initialization function.
@@ -48,7 +48,7 @@ fn example(cx: Scope) -> Element {
}
```
Mechanically, each call to `use_hook` provides us with `&mut T` for a new value.
Mechanically, each call to `use_hook` provides us with `&mut T` for a new value.
```rust
fn example(cx: Scope) -> Element {
@@ -182,7 +182,7 @@ By default, we bundle a handful of hooks in the Dioxus-Hooks package. Feel free
- [use_context](https://docs.rs/dioxus_hooks/use_context) - consume state provided by `use_provide_context`
For a more in-depth guide to building new hooks, checkout out the advanced hook building guide in the reference.
## Wrapping up
In this chapter, we learned about the mechanics and intricacies of storing state inside a component.
+7 -7
View File
@@ -10,7 +10,7 @@ Before we get too deep into the mechanics of interactivity, we should first unde
Every app you'll ever build has some sort of information that needs to be rendered to the screen. Dioxus is responsible for translating your desired user interface to what is rendered to the screen. *You* are responsible for providing the content.
The dynamic data in your user interface is called `State`.
The dynamic data in your user interface is called `State`.
When you first launch your app with `dioxus::web::launch_with_props` you'll be providing the initial state. You need to declare the initial state *before* starting the app.
@@ -32,7 +32,7 @@ fn main() {
}
```
When Dioxus renders your app, it will pass an immutable reference of `PostProps` to your `Post` component. Here, you can pass the state down into children.
When Dioxus renders your app, it will pass an immutable reference to `PostProps` into your `Post` component. Here, you can pass the state down into children.
```rust
fn App(cx: Scope<PostProps>) -> Element {
@@ -73,14 +73,14 @@ fn App(cx: Scope)-> Element {
url: String::from("dioxuslabs.com"),
title: String::from("Hello, world"),
original_poster: String::from("dioxus")
}
}
});
cx.render(rsx!{
Title { title: &post.title }
Score { score: &post.score }
// etc
})
})
}
```
@@ -102,7 +102,7 @@ We'll dive deeper into how exactly these hooks work later.
### When do I update my state?
There are a few different approaches to choosing when to update your state. You can update your state in response to user-triggered events or asynchronously in some background task.
There are a few different approaches to choosing when to update your state. You can update your state in response to user-triggered events or asynchronously in some background task.
### Updating state in listeners
@@ -120,7 +120,7 @@ fn App(cx: Scope)-> Element {
"Generate a random post"
}
Post { props: &post }
})
})
}
```
@@ -162,7 +162,7 @@ Whenever you inform Dioxus that the component needs to be updated, it will "rend
![Diffing](../images/diffing.png)
In React, the specifics of when a component gets re-rendered is somewhat blurry. With Dioxus, any component can mark itself as "dirty" through a method on `Context`: `needs_update`. In addition, any component can mark any _other_ component as dirty provided it knows the other component's ID with `needs_update_any`.
In React, the specifics of when a component gets re-rendered is somewhat blurry. With Dioxus, any component can mark itself as "dirty" through a method on `Context`: `needs_update`. In addition, any component can mark any _other_ component as dirty provided it knows the other component's ID with `needs_update_any`.
With these building blocks, we can craft new hooks similar to `use_state` that let us easily tell Dioxus that new information is ready to be sent to the screen.