|
@@ -9,8 +9,8 @@
|
|
|
|
|
|
This overview provides a brief introduction to Dioxus. For a more in-depth guide, make sure to check out:
|
|
|
|
|
|
-- [Getting Started](https://dioxuslabs.com/docs/0.3/guide/en/getting_started/index.html)
|
|
|
-- [Book (0.3)](https://dioxuslabs.com/docs/0.3/guide/en/)
|
|
|
+- [Getting Started](https://dioxuslabs.com/learn/0.4/getting_started)
|
|
|
+- [Book (0.4)](https://dioxuslabs.com/learn/0.4/)
|
|
|
- [Examples](https://github.com/DioxusLabs/example-projects)
|
|
|
|
|
|
# Overview and Goals
|
|
@@ -27,7 +27,7 @@ Dioxus is heavily inspired by React, supporting many of the same concepts:
|
|
|
|
|
|
If you know React, then you know Dioxus.
|
|
|
|
|
|
-Dioxus is *substantially* more performant than many of the other Rust UI libraries (Yew/Percy) and is *significantly* more performant
|
|
|
+Dioxus is _substantially_ more performant than many of the other Rust UI libraries (Yew/Percy) and is _significantly_ more performant
|
|
|
than React—roughly competitive with InfernoJS.
|
|
|
|
|
|
Remember: Dioxus is a library for declaring interactive user interfaces—it is not a dedicated renderer. Most 1st party renderers for Dioxus currently only support web technologies.
|
|
@@ -62,7 +62,7 @@ macro or the NodeFactory API. For the most part, you want to use the `rsx!`
|
|
|
macro.
|
|
|
|
|
|
Any element in `rsx!` can have attributes, listeners, and children. For
|
|
|
-consistency, we force all attributes and listeners to be listed *before*
|
|
|
+consistency, we force all attributes and listeners to be listed _before_
|
|
|
children.
|
|
|
|
|
|
```rust, ignore
|
|
@@ -190,6 +190,7 @@ fn Header(cx: Scope, title: String, color: String) -> Element {
|
|
|
|
|
|
Components may also borrow data from their parent component. We just need to
|
|
|
attach some lifetimes to the props struct.
|
|
|
+
|
|
|
> Note: we don't need to derive `PartialEq` for borrowed props since they cannot be memoized.
|
|
|
|
|
|
```rust, ignore
|
|
@@ -251,9 +252,10 @@ fn App(cx: Scope) -> Element {
|
|
|
|
|
|
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):
|
|
|
-- 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
|
|
|
+
|
|
|
+- 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
|
|
|
|
|
|
In a sense, hooks let us add a field of state to our component without declaring
|
|
|
an explicit state struct. However, this means we need to "load" the struct in the right
|
|
@@ -307,6 +309,7 @@ This overview doesn't cover everything. Make sure to check out the tutorial and
|
|
|
website for more details.
|
|
|
|
|
|
Beyond this overview, Dioxus supports:
|
|
|
+
|
|
|
- Server-side rendering
|
|
|
- Concurrent rendering (with async support)
|
|
|
- Web/Desktop/Mobile support
|
|
@@ -323,14 +326,16 @@ Good luck!
|
|
|
## Inspiration, Resources, Alternatives, and Credits
|
|
|
|
|
|
Dioxus is inspired by:
|
|
|
+
|
|
|
- React: for its hooks, concurrency, suspense
|
|
|
- Dodrio: for its research in bump allocation, double buffering, and diffing architecture
|
|
|
|
|
|
Alternatives to Dioxus include:
|
|
|
+
|
|
|
- Yew: supports function components and web, but no SSR, borrowed data, or bump allocation. Rather slow at times.
|
|
|
- Percy: supports function components, web, ssr, but lacks state management
|
|
|
- Sycamore: supports function components, web, ssr, but is closer to SolidJS than React
|
|
|
- MoonZoom/Seed: opinionated frameworks based on the Elm model (message, update)—no hooks
|
|
|
|
|
|
-We've put a lot of work into making Dioxus ergonomic and *familiar*.
|
|
|
+We've put a lot of work into making Dioxus ergonomic and _familiar_.
|
|
|
Our target audience is TypeScript developers looking to switch to Rust for the web—so we need to be comparable to React.
|