Bläddra i källkod

Proofread chapter 7

Reinis Mazeiks 3 år sedan
förälder
incheckning
fc7d94b8d1

+ 8 - 17
docs/guide/src/interactivity/hooks.md

@@ -80,7 +80,7 @@ This pattern might seem strange at first, but it can be a significant upgrade ov
 ## Rules of hooks
 ## Rules of hooks
 
 
 Hooks are sensitive to how they are used. To use hooks, you must abide by the
 Hooks are sensitive to how they are used. To use hooks, you must abide by the
-"rules of hooks" (borrowed from react)](https://reactjs.org/docs/hooks-rules.html):
+"rules of hooks" ([borrowed from react](https://reactjs.org/docs/hooks-rules.html)):
 
 
 - Functions with "use_" should not be called in callbacks
 - Functions with "use_" should not be called in callbacks
 - Functions with "use_" should not be called out of order
 - Functions with "use_" should not be called out of order
@@ -245,19 +245,10 @@ fn example(cx: Scope) -> Element {
 
 
 By default, we bundle a handful of hooks in the Dioxus-Hooks package. Feel free to click on each hook to view its definition and associated documentation.
 By default, we bundle a handful of hooks in the Dioxus-Hooks package. Feel free to click on each hook to view its definition and associated documentation.
 
 
-- [use_state](https://docs.rs/dioxus_hooks/use_state) - store state with ergonomic updates
-- [use_ref](https://docs.rs/dioxus_hooks/use_ref) - store non-clone state with a refcell
-- [use_future](https://docs.rs/dioxus_hooks/use_future) - store a future to be polled after initialization
-- [use_coroutine](https://docs.rs/dioxus_hooks/use_coroutine) - store a future that can be stopped/started/communicated with
-- [use_noderef](https://docs.rs/dioxus_hooks/use_noderef) - store a handle to the native element
-- [use_callback](https://docs.rs/dioxus_hooks/use_callback) - store a callback that implements PartialEq for memoization
-- [use_provide_context](https://docs.rs/dioxus_hooks/use_provide_context) - expose state to descendent components
-- [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.
-
-In the next chapter, we'll cover event listeners in similar depth, and how to combine the two to build interactive components.
+- [use_state](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_state.html) - store state with ergonomic updates
+- [use_ref](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_ref.html) - store non-clone state with a refcell
+- [use_future](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_future.html) - store a future to be polled after initialization
+- [use_coroutine](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_coroutine.html) - store a future that can be stopped/started/communicated with
+- [use_context_provider](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_context_provider.html) - expose state to descendent components
+- [use_context](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_context.html) - consume state provided by `use_provide_context`
+- [use_suspense](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_suspense.html)

+ 4 - 19
docs/guide/src/interactivity/importanthooks.md

@@ -2,23 +2,13 @@
 
 
 Most components you will write in Dioxus will need to store state somehow. For local state, we provide two very convenient hooks:
 Most components you will write in Dioxus will need to store state somehow. For local state, we provide two very convenient hooks:
 
 
-- `use_state`
-- `use_ref`
+- [use_state](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_state.html)
+- [use_ref](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_ref.html)
 
 
 Both of these hooks are extremely powerful and flexible, so we've dedicated this section to understanding them properly.
 Both of these hooks are extremely powerful and flexible, so we've dedicated this section to understanding them properly.
 
 
 > These two hooks are not the only way to store state. You can always build your own hooks!
 > These two hooks are not the only way to store state. You can always build your own hooks!
 
 
-## Note on Hooks
-
-If you're struggling with errors due to usage in hooks, make sure you're following the rules of hooks:
-
-- Functions with "use_" should not be called in callbacks
-- Functions with "use_" should not be called out of order
-- Functions with "use_" should not be called in loops or conditionals
-
-A large majority of issues that seem to be "wrong with Dioxus" are actually just a misuse of hooks.
-
 ## `use_state`
 ## `use_state`
 
 
 The `use_state` hook is very similar to its React counterpart. When we use it, we get two values: 
 The `use_state` hook is very similar to its React counterpart. When we use it, we get two values: 
@@ -84,7 +74,7 @@ cx.spawn({
 
 
 You might've noticed a fundamental limitation to `use_state`: to modify the value in-place, it must be cheaply cloneable. But what if your type is not cheap to clone?
 You might've noticed a fundamental limitation to `use_state`: to modify the value in-place, it must be cheaply cloneable. But what if your type is not cheap to clone?
 
 
-In these cases, you should reach for `use_ref` which is essentially just a glorified `Rc<RefCell<T>>` (typical Rust UI shenanigans).
+In these cases, you should reach for `use_ref` which is essentially just a glorified `Rc<RefCell<T>>` (Rust [smart pointers](https://doc.rust-lang.org/book/ch15-04-rc.html)).
 
 
 This provides us some runtime locks around our data, trading reliability for performance. For most cases though, you will find it hard to make `use_ref` crash.
 This provides us some runtime locks around our data, trading reliability for performance. For most cases though, you will find it hard to make `use_ref` crash.
 
 
@@ -117,7 +107,7 @@ names.write().push("Tiger");
 If you don't want to re-render the component when names is updated, then we can use the `write_silent` method:
 If you don't want to re-render the component when names is updated, then we can use the `write_silent` method:
 
 
 ```rust
 ```rust
-names.write().push("Transmogrifier");
+names.write_silent().push("Transmogrifier");
 ```
 ```
 
 
 Again, like `UseState`, the `UseRef` handle is clonable into async contexts:
 Again, like `UseState`, the `UseRef` handle is clonable into async contexts:
@@ -135,8 +125,3 @@ cx.spawn({
     }
     }
 })
 })
 ```
 ```
-
-
-## Wrapping up
-
-These two hooks are extremely powerful at storing state.

+ 5 - 3
docs/guide/src/interactivity/index.md

@@ -44,9 +44,9 @@ fn App(cx: Scope<PostProps>) -> Element {
 }
 }
 ```
 ```
 
 
-State in Dioxus follows a pattern called "one-way-data-flow." As your components create new components as their children, your app's structure will eventually grow into a tree where state gets passed down from the root component into "leaves" of the tree.
+State in Dioxus follows a pattern called "one-way data-flow." As your components create new components as their children, your app's structure will eventually grow into a tree where state gets passed down from the root component into "leaves" of the tree.
 
 
-You've probably seen the tree of UI components represented using an directed-acyclic-graph:
+You've probably seen the tree of UI components represented using a directed acyclic graph:
 
 
 ![image](../images/component_tree.png)
 ![image](../images/component_tree.png)
 
 
@@ -173,11 +173,13 @@ With these building blocks, we can craft new hooks similar to `use_state` that l
 
 
 In general, Dioxus should be plenty fast for most use cases. However, there are some rules you should consider following to ensure your apps are quick.
 In general, Dioxus should be plenty fast for most use cases. However, there are some rules you should consider following to ensure your apps are quick.
 
 
-- 1) **Don't call setstate _while rendering_**. This will cause Dioxus to unnecessarily re-check the component for updates or enter an infinite loop.
+- 1) **Don't call set_state _while rendering_**. This will cause Dioxus to unnecessarily re-check the component for updates or enter an infinite loop.
 - 2) **Break your state apart into smaller sections.** Hooks are explicitly designed to "unshackle" your state from the typical model-view-controller paradigm, making it easy to reuse useful bits of code with a single function.
 - 2) **Break your state apart into smaller sections.** Hooks are explicitly designed to "unshackle" your state from the typical model-view-controller paradigm, making it easy to reuse useful bits of code with a single function.
 - 3) **Move local state down**. Dioxus will need to re-check child components of your app if the root component is constantly being updated. You'll get best results if rapidly-changing state does not cause major re-renders.
 - 3) **Move local state down**. Dioxus will need to re-check child components of your app if the root component is constantly being updated. You'll get best results if rapidly-changing state does not cause major re-renders.
 
 
+<!-- todo: link when the section exists
 Don't worry - Dioxus is fast. But, if your app needs *extreme performance*, then take a look at the `Performance Tuning` in the `Advanced Guides` book.
 Don't worry - Dioxus is fast. But, if your app needs *extreme performance*, then take a look at the `Performance Tuning` in the `Advanced Guides` book.
+-->
 
 
 ## The `Scope` object
 ## The `Scope` object