Documentation for stateless functions/components, condensed two pages about refs into one #4964
Conversation
jimfb
force-pushed
the
stateless-functions-and-render-docs
branch
from
f28ac0f to
0295ff6
Compare
jimfb
force-pushed
the
stateless-functions-and-render-docs
branch
from
0295ff6 to
1a53e82
Compare
|
Added documentation for stateless components, as per conversation with @spicyj. |
jimfb
force-pushed
the
stateless-functions-and-render-docs
branch
from
1a53e82 to
133ff81
Compare
jimfb
changed the title
| @@ -1,13 +1,97 @@ | |||
| --- | |||
| id: more-about-refs | |||
| title: More About Refs | |||
| title: References to Components | |||
There was a problem hiding this comment.
Can we call it "Refs to Components" here (and in the sidebar, if that's specified somewhere else)?
jimfb
force-pushed
the
stateless-functions-and-render-docs
branch
3 times, most recently
from
80eab35 to
1c1e7b4
Compare
|
@spicyj Fixed, ready to go? |
jimfb
force-pushed
the
stateless-functions-and-render-docs
branch
from
1c1e7b4 to
e3821e7
Compare
| } | ||
| }} /> | ||
| <div> | ||
| <input type="text" ref="(ref) => this.myTextInput = ref" /> |
There was a problem hiding this comment.
Shouldn't this be ref={(ref) => this.myTextInput = ref} ??
There was a problem hiding this comment.
Actually this should just be ref="myTextInput" since we're talking about string refs.
|
|
||
| > NOTE: | ||
| > | ||
| > Because stateless functions don't have a backing instance, you can't attach a ref to a stateless function component. Normally this isn't an issue, since stateless functions do not provide an imperative API, there really isn't much you could do with an instance anyway. However, if a user wants to find the DOM node of a stateless function component, they must wrap the component in a stateful component (eg. ES6 class component) and attach the ref to the stateful wrapper component. |
There was a problem hiding this comment.
Normally this isn't an issue, since stateless functions do not provide an imperative API, there really isn't much you could do with an instance anyway.
This doesn't parse as a sentence to me. Maybe split into 2 sentences at the first comma?
| ``` | ||
|
|
||
|
|
||
| This simplified component API is intended for components that are pure functions of their props. These components must not retain internal state, do not have backing instances, and do not have the component lifecycle methods. They are pure functional transforms of their input, with zero boilerplate. |
There was a problem hiding this comment.
Super nit (that I shouldn't actually care much about but that tiny bit of OCD in my brain decided to notice): the rest of our docs uses a single space after periods in a sentence. You used 2 (and not entirely consistently at that). I'm sure you'll ignore this and that's fine.
There was a problem hiding this comment.
Haha, one space for proportional fonts and two spaces for monospace fonts leaves it ambiguous what to do when you're writing .md which will turn into HTML. I went ahead and changed this file to single-space, though we aren't exactly consistent throughout the rest of our docs :).
jimfb
force-pushed
the
stateless-functions-and-render-docs
branch
from
e3821e7 to
f7000b9
Compare
|
Good to go? |
jimfb
force-pushed
the
stateless-functions-and-render-docs
branch
from
f7000b9 to
10ea270
Compare
|
|
||
| So how do we talk to the *real* backing instance of the input? | ||
| Note that when the referenced component is unmounted and whenever the ref changes, the old ref will be called with `null` as an argument. This prevents memory leaks in the case that the instance is stored, as in the first example. Also note that when writing refs with inline function expressions as in the examples here, React sees a different function object each time so on every update, ref will be called with `null` immediately before it's called with the component instance. |
There was a problem hiding this comment.
nit: leading whitespace is still here (and in the next paragraph, and the one after that… and the one after that but you didn't add that)
… about refs into a single page.
jimfb
force-pushed
the
stateless-functions-and-render-docs
branch
from
10ea270 to
5ee8a93
Compare
|
👍 |
Documentation for stateless functions/components, condensed two pages about refs into one
Condensed the two refs pages into a single refs page, added a note about stateless components having null references.