Bounce

Bounce 是为 Yew 提供的无缝状态管理库。

Bounce 受 Redux 和 Recoil 启发。

原理

目前可用的 Yew 状态管理解决方案都存在一些（或全部）以下局限性

• 过于冗长。

  用户必须手动控制是否通知订阅者或手动定义上下文。

• 状态更改通知所有人。

  状态更改将通知所有订阅者。

• 不必要的克隆。

  每次有更改时，都会为所有订阅者产生状态的克隆。

Bounce 希望成为一个状态管理库，

• 具有最少的冗余。

  通过 PartialEq 自动检测更改。

• 只通知相关订阅者。

  当状态更改时，只有订阅该状态的钩子将被通知。

• 减少克隆。

  状态是 Rc。

示例

为了使 bounce 状态正常工作，必须注册一个 <BounceRoot />。

#[function_component(App)]
fn app() -> Html {
    html! {
        <BounceRoot>
            {children}
        </BounceRoot>
    }
}

简单状态称为 Atom。

您可以派生任何实现 PartialEq 和 Default 的结构的 Atom。

#[derive(PartialEq, Atom)]
struct Username {
    inner: String,
}

impl Default for Username {
    fn default() -> Self {
        Self {
            inner: "Jane Doe".into(),
        }
    }
}

然后您可以使用 use_atom 钩子使用它。

当第一次使用 Atom 时，它将使用其 Default 值进行初始化。

#[function_component(Setter)]
fn setter() -> Html {
    let username = use_atom::<Username>();

    let on_text_input = {
        let username = username.clone();

        Callback::from(move |e: InputEvent| {
            let input: HtmlInputElement = e.target_unchecked_into();

            username.set(Username { inner: input.value().into() });
        })
    };

    html! {
        <div>
            <input type="text" oninput={on_text_input} value={username.inner.to_string()} />
        </div>
    }
}

如果您希望创建只读（或只写）句柄，可以使用 use_atom_value（或 use_atom_setter）。

#[function_component(Reader)]
fn reader() -> Html {
    let username = use_atom_value::<Username>();

    html! { <div>{"Hello, "}{&username.inner}</div> }
}

您可以在 这里 找到完整的示例。

许可证

Bounce 同时受 MIT 许可证和 Apache 许可证（版本 2.0）的约束。