Ref soup

[smashwilson]

We use a lot of refs in our JSX, which feels un-React-y.

There are a number of reasons for this:

1. The package used to use Etch exclusively. Etch makes it much easier to operate imperatively on this.element. As different components were ported to React, it was often more convenient to use refs to defer re-architecting the way that some things were written.
2. Before we adopted Enzyme, refs were the most convenient way to access children within test cases. Some tests are still written in the "descending through a ref tree" style to access things they need to.
3. We provide a number of components to declaratively interact with the Atom API (Decoration, Command, PaneItem). The Atom API accepts DOM elements as "items," so often we need to use a ref to pass one.
4. We have a (fairly clunky) mechanism to manage preserving focus as tabs as hidden and shown. Because focus is an imperative DOM API, we need refs to test for and operate on element focus.

Refs that exist from categories (1) and (2) should be relatively easy to eliminate. I suspect, but have not confirmed, that we could tidy up quite a few of them.

I suspect that we can do better on (3) and (4) as well with alternate designs... but I'm not sure what those might look like. Brainstorming is welcome 😄

[smashwilson]

For (4), what I'd like to build is something like this:

<SomeParentComponent>
  <PreserveFocus>
     <div>
       <!-- more layers of composition -->
        <Focusable key="something">
           <button>Hooray</button>
         </Focusable>
      </div>
  </PreserveFocus>
</SomeParentComponent>