Add React PureComponent and Fragment

* Add PureComponent doing shallow state & props comparison to avoid `render()` being called.
* Also add a PureStatelessComponent alias to PureComponent taking no state type parameter. Such components are mapping perfectly to an elm-like architecture with immutable props and no mutable state.
* Add `Fragment` (class) and `fragment` helper function to easily return lists from `render()`

Author: vbfox

src/Fable.React/Fable.Helpers.React.fs

@@ -14,6 +14,13 @@ module Props =
     type IHTMLProp =
         inherit IProp
 
+    type IFragmentProp =
+        inherit IProp
+
+    type FragmentProp =
+        | Key of string
+        interface IFragmentProp
+
     type Prop =
         | Key of string
         | Ref of (Browser.Element->unit)
@@ -662,6 +669,10 @@ let inline voidEl (tag: string) (props: IHTMLProp list) : ReactElement =
 let inline svgEl (tag: string) (props: IProp list) (children: ReactElement list): ReactElement =
     createElement(tag, keyValueList CaseRules.LowerFirst props, children)
 
+/// Instantiate a React fragment
+let inline fragment (props: IFragmentProp list) (children: ReactElement list): ReactElement =
+    createElement(typedefof<Fragment>, keyValueList CaseRules.LowerFirst props, children)
+
 // Standard elements
 let inline a b c = domEl "a" b c
 let inline abbr b c = domEl "abbr" b c

src/Fable.React/Fable.Import.React.fs

@@ -65,12 +65,12 @@ module React =
     /// Create a React component by inheriting this class as follows
     ///
     /// ```
-    /// type MyComponent(props) =
-    ///     inherit React.Component<MyProps, MyState>(props)
+    /// type MyComponent(initialProps) =
+    ///     inherit React.Component<MyProps, MyState>(initialProps)
     ///     base.setInitState({ value = 5 })
     ///
     ///     override this.render() =
-    ///         // Don't use captured `props` from constructor,
+    ///         // Don't use captured `initialProps` from constructor,
     ///         // use `this.props` instead (updated version)
     ///         let msg = sprintf "Hello %s, you have %i €"
     ///                     this.props.name this.state.value
@@ -170,6 +170,40 @@ module React =
 
         interface ReactElement
 
+    /// A react component that implements `shouldComponentUpdate()` with a shallow prop and state comparison.
+    ///
+    /// Usage:
+    /// ```
+    /// type MyComponent(initialProps) =
+    ///     inherit React.PureComponent<MyProps, MyState>(initialProps)
+    ///     base.setInitState({ value = 5 })
+    ///     override this.render() =
+    ///         let msg = sprintf "Hello %s, you have %i €"
+    ///                     this.props.name this.state.value
+    ///         div [] [ofString msg]
+    /// ```
+    and [<AbstractClass; Import("PureComponent", "react")>] PureComponent<[<Pojo>]'P, [<Pojo>]'S>(props: 'P) =
+        inherit Component<'P, 'S>(props)
+
+    /// A react component that implements `shouldComponentUpdate()` with a shallow prop comparison.
+    ///
+    /// Usage:
+    /// ```
+    /// type MyComponent(initialProps) =
+    ///     inherit React.PureStatelessComponent<MyProps>(initialProps)
+    ///     override this.render() =
+    ///         let msg = sprintf "Hello %s, you have %i €"
+    ///                     this.props.name this.props.value
+    ///         div [] [ofString msg]
+    /// ```
+    and [<AbstractClass; Import("PureComponent", "react")>] PureStatelessComponent<[<Pojo>]'P>(props: 'P) =
+        inherit Component<'P, obj>(props)
+
+    and FragmentProps = { key: string }
+
+    and [<Import("Fragment", "react")>] Fragment(props: FragmentProps) =
+        interface ReactElement
+
     and ClassicComponent<'P, 'S> =
         abstract props: 'P with get, set
         abstract state: 'S with get, set