[ADD] hooks: add useExternalListener hook

It is very useful.

Also, this commit prettifies the code.

closes #608

doc/reference/hooks.md

@@ -17,6 +17,7 @@
   - [`useContext`](#usecontext)
   - [`useRef`](#useref)
   - [`useSubEnv`](#usesubenv)
+  - [`useExternalListener`](#useexternallistener)
   - [`useStore`](#usestore)
   - [`useDispatch`](#usedispatch)
   - [`useGetters`](#usegetters)
@@ -354,6 +355,17 @@ will be added to the parent environment. Note that it will extend, not replace
 the parent environment. And of course, the parent environment will not be
 affected.
 
+### `useExternalListener`
+
+The `useExternalListener` hook helps solve a very common problem: adding and removing
+a listener on some target whenever a component is mounted/unmounted. For example,
+a dropdown menu (or its parent) may need to listen to a `click` event on `window`
+to be closed:
+
+```js
+useExternalListener(window, "click", this.closeMenu);
+```
+
 ### `useStore`
 
 The `useStore` hook is the entry point for a component to connect to the store.