From bd9dc1f954fc9b8acb85e53a319b76506b19fa06 Mon Sep 17 00:00:00 2001 From: jmlsf Date: Mon, 26 Feb 2018 21:10:42 -0800 Subject: [PATCH] Add a little bit of explanatory text. --- docs/FAQ/UsingRefs.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/FAQ/UsingRefs.md b/docs/FAQ/UsingRefs.md index 42bd9df..38cd14e 100644 --- a/docs/FAQ/UsingRefs.md +++ b/docs/FAQ/UsingRefs.md @@ -28,11 +28,11 @@ We'll start with a code fragment, because it is worth a 1000 words: ``` Notes: - 1. That's a Form-2 component. That allows us to retain state outside of the renderer `fn`. - 2. We capture state in `!video`. The state we capture is a reference to a video component. - 2. `!video` is a `clojure.core/atom` and not a `reaagent.core/atom` - 4. On the `:video` component there's a `:ref` callback function which establishes the state in `!video` - 5. Thereafter, `@!video` is used with the `:button's` `:on-click` to manipulate the `video` + 1. This example uses a Form-2 component, which allows us to retain state outside of the renderer `fn`. The same technique would work with a Form-3 component. + 2. We capture state in `!video`. In this example, the state we capture is a reference to a [video HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video). + 2. `!video` is a `clojure.core/atom` and not a `reaagent.core/atom`. We don't use a normal atom because refs never change during the lifecycle of a component and if we used a reagent atom, it would cause an unnecessary re-render when the ref callback mutates the atom. + 4. On the `:video` component there's a `:ref` callback function which establishes the state in `!video`. You can attach a ref callback to any of the Hiccup elements. + 5. Thereafter, `@!video` is used with the `:button's` `:on-click` to manipulate the `video` DOM methods. 5. For full notes [read Paulus' blog post](https://presumably.de/reagent-mysteries-part-3-manipulating-the-dom.html) 6. For more background on callback refs, see [React's documentation](https://facebook.github.io/react/docs/more-about-refs.html)