chore: rename all &cx to cx, make clipppy happy
This commit is contained in:
1 parent
e8133e9449
commit
4eefc3f854
85 files changed
+256
-271
No files matched your search
@@ -12,7 +12,7 @@ Your component today might look something like this:
|
||||
|
||||
```rust
|
||||
fn Comp(cx: Scope) -> DomTree {
|
||||
let (title, set_title) = use_state(&cx, || "Title".to_string());
|
||||
let (title, set_title) = use_state(cx, || "Title".to_string());
|
||||
cx.render(rsx!{
|
||||
input {
|
||||
value: title,
|
||||
@@ -26,7 +26,7 @@ This component is fairly straightforward – the input updates its own value on
|
||||
|
||||
```rust
|
||||
fn Comp(cx: Scope) -> DomTree {
|
||||
let (title, set_title) = use_state(&cx, || "Title".to_string());
|
||||
let (title, set_title) = use_state(cx, || "Title".to_string());
|
||||
cx.render(rsx!{
|
||||
div {
|
||||
input {
|
||||
@@ -49,7 +49,7 @@ We can use signals to generate a two-way binding between data and the input box.
|
||||
|
||||
```rust
|
||||
fn Comp(cx: Scope) -> DomTree {
|
||||
let mut title = use_signal(&cx, || String::from("Title"));
|
||||
let mut title = use_signal(cx, || String::from("Title"));
|
||||
cx.render(rsx!(input { value: title }))
|
||||
}
|
||||
```
|
||||
@@ -58,8 +58,8 @@ For a slightly more interesting example, this component calculates the sum betwe
|
||||
|
||||
```rust
|
||||
fn Calculator(cx: Scope) -> DomTree {
|
||||
let mut a = use_signal(&cx, || 0);
|
||||
let mut b = use_signal(&cx, || 0);
|
||||
let mut a = use_signal(cx, || 0);
|
||||
let mut b = use_signal(cx, || 0);
|
||||
let mut c = a + b;
|
||||
rsx! {
|
||||
input { value: a }
|
||||
@@ -72,8 +72,8 @@ fn Calculator(cx: Scope) -> DomTree {
|
||||
Do you notice how we can use built-in operations on signals? Under the hood, we actually create a new derived signal that depends on `a` and `b`. Whenever `a` or `b` update, then `c` will update. If we need to create a new derived signal that's more complex than a basic operation (`std::ops`) we can either chain signals together or combine them:
|
||||
|
||||
```rust
|
||||
let mut a = use_signal(&cx, || 0);
|
||||
let mut b = use_signal(&cx, || 0);
|
||||
let mut a = use_signal(cx, || 0);
|
||||
let mut b = use_signal(cx, || 0);
|
||||
|
||||
// Chain signals together using the `with` method
|
||||
let c = a.with(b).map(|(a, b)| *a + *b);
|
||||
@@ -84,7 +84,7 @@ let c = a.with(b).map(|(a, b)| *a + *b);
|
||||
If we ever need to get the value out of a signal, we can simply `deref` it.
|
||||
|
||||
```rust
|
||||
let mut a = use_signal(&cx, || 0);
|
||||
let mut a = use_signal(cx, || 0);
|
||||
let c = *a + *b;
|
||||
```
|
||||
|
||||
@@ -97,7 +97,7 @@ Sometimes you want a signal to propagate across your app, either through far-awa
|
||||
```rust
|
||||
const TITLE: Atom<String> = || "".to_string();
|
||||
const Provider: Component = |cx|{
|
||||
let title = use_signal(&cx, &TITLE);
|
||||
let title = use_signal(cx, &TITLE);
|
||||
render!(input { value: title })
|
||||
};
|
||||
```
|
||||
@@ -106,7 +106,7 @@ If we use the `TITLE` atom in another component, we can cause updates to flow be
|
||||
|
||||
```rust
|
||||
const Receiver: Component = |cx|{
|
||||
let title = use_signal(&cx, &TITLE);
|
||||
let title = use_signal(cx, &TITLE);
|
||||
log::info!("This will only be called once!");
|
||||
rsx!(cx,
|
||||
div {
|
||||
@@ -133,7 +133,7 @@ Dioxus automatically understands how to use your signals when mixed with iterato
|
||||
```rust
|
||||
const DICT: AtomFamily<String, String> = |_| {};
|
||||
const List: Component = |cx|{
|
||||
let dict = use_signal(&cx, &DICT);
|
||||
let dict = use_signal(cx, &DICT);
|
||||
cx.render(rsx!(
|
||||
ul {
|
||||
For { each: dict, map: |k, v| rsx!( li { "{v}" }) }
|
||||
|
||||
@@ -59,7 +59,7 @@ If we represented the reactive graph presented above in Dioxus, it would look ve
|
||||
// Declare a component that holds our datasources and calculates `g`
|
||||
fn RenderGraph(cx: Scope) -> Element {
|
||||
let seconds = use_datasource(SECONDS);
|
||||
let constant = use_state(&cx, || 1);
|
||||
let constant = use_state(cx, || 1);
|
||||
|
||||
cx.render(rsx!(
|
||||
RenderG { seconds: seconds }
|
||||
|
||||
@@ -28,8 +28,8 @@ If we used global state like use_context or fermi, we might be tempted to inject
|
||||
|
||||
```rust
|
||||
fn Titlebar(cx: Scope<TitlebarProps>) -> Element {
|
||||
let title = use_read(&cx, TITLE);
|
||||
let subtitle = use_read(&cx, SUBTITLE);
|
||||
let title = use_read(cx, TITLE);
|
||||
let subtitle = use_read(cx, SUBTITLE);
|
||||
|
||||
cx.render(rsx!{/* ui */})
|
||||
}
|
||||
@@ -43,11 +43,11 @@ To enable our titlebar component to be used across apps, we want to lift our ato
|
||||
|
||||
```rust
|
||||
fn DocsiteTitlesection(cx: Scope) {
|
||||
let title = use_read(&cx, TITLE);
|
||||
let subtitle = use_read(&cx, SUBTITLE);
|
||||
let title = use_read(cx, TITLE);
|
||||
let subtitle = use_read(cx, SUBTITLE);
|
||||
|
||||
let username = use_read(&cx, USERNAME);
|
||||
let points = use_read(&cx, POINTS);
|
||||
let username = use_read(cx, USERNAME);
|
||||
let points = use_read(cx, POINTS);
|
||||
|
||||
cx.render(rsx!{
|
||||
TitleBar { title: title, subtitle: subtitle }
|
||||
|
||||
@@ -13,7 +13,7 @@ struct Todo {
|
||||
is_editing: bool,
|
||||
}
|
||||
|
||||
let todos = use_ref(&cx, || vec![Todo::new()]);
|
||||
let todos = use_ref(cx, || vec![Todo::new()]);
|
||||
|
||||
cx.render(rsx!{
|
||||
ul {
|
||||
@@ -40,7 +40,7 @@ Instead, let's refactor our Todo component to handle its own state:
|
||||
```rust
|
||||
#[inline_props]
|
||||
fn Todo<'a>(cx: Scope, todo: &'a Todo) -> Element {
|
||||
let is_hovered = use_state(&cx, || false);
|
||||
let is_hovered = use_state(cx, || false);
|
||||
|
||||
cx.render(rsx!{
|
||||
li {
|
||||
@@ -80,15 +80,15 @@ struct State {
|
||||
}
|
||||
|
||||
// in the component
|
||||
let state = use_ref(&cx, State::new)
|
||||
let state = use_ref(cx, State::new)
|
||||
```
|
||||
|
||||
The "better" approach for this particular component would be to break the state apart into different values:
|
||||
|
||||
```rust
|
||||
let count = use_state(&cx, || 0);
|
||||
let color = use_state(&cx, || "red");
|
||||
let names = use_state(&cx, HashMap::new);
|
||||
let count = use_state(cx, || 0);
|
||||
let color = use_state(cx, || "red");
|
||||
let names = use_state(cx, HashMap::new);
|
||||
```
|
||||
|
||||
You might recognize that our "names" value is a HashMap – which is not terribly cheap to clone every time we update its value. To solve this issue, we *highly* suggest using a library like [`im`](https://crates.io/crates/im) which will take advantage of structural sharing to make clones and mutations much cheaper.
|
||||
@@ -96,7 +96,7 @@ You might recognize that our "names" value is a HashMap – which is not terribl
|
||||
When combined with the `make_mut` method on `use_state`, you can get really succinct updates to collections:
|
||||
|
||||
```rust
|
||||
let todos = use_state(&cx, im_rc::HashMap::default);
|
||||
let todos = use_state(cx, im_rc::HashMap::default);
|
||||
|
||||
todos.make_mut().insert("new todo", Todo {
|
||||
contents: "go get groceries",
|
||||
|
||||
@@ -8,8 +8,8 @@ For example, let's say we have a component that has two children:
|
||||
```rust
|
||||
fn Demo(cx: Scope) -> Element {
|
||||
// don't worry about these 2, we'll cover them later
|
||||
let name = use_state(&cx, || String::from("bob"));
|
||||
let age = use_state(&cx, || 21);
|
||||
let name = use_state(cx, || String::from("bob"));
|
||||
let age = use_state(cx, || 21);
|
||||
|
||||
cx.render(rsx!{
|
||||
Name { name: name }
|
||||
|
||||
@@ -20,7 +20,7 @@ Our component is really simple – we just call `use_ref` to get an initial calc
|
||||
|
||||
```rust
|
||||
fn app(cx: Scope) -> Element {
|
||||
let state = use_ref(&cx, Calculator::new);
|
||||
let state = use_ref(cx, Calculator::new);
|
||||
|
||||
cx.render(rsx!{
|
||||
// the rendering code
|
||||
|
||||
Reference in new issue
Block a user