feat: react hook

.eslintrc

@@ -32,10 +32,7 @@
     "array-bracket-spacing": "off",
     "no-unused-expressions": "off",
     "linebreak-style": "off",
-    "func-style": [
-      "error",
-      "expression"
-    ],
+    "func-style": "off",
     "comma-dangle": [
       "error",
       "never"

app/controller/example/index.js

@@ -12,6 +12,14 @@ module.exports = app => {
         text: 'React Stateless Component Server Render'
       });
     }
+
+    async reactHook() {
+      const { ctx } = this;
+      await ctx.render('example/hook.js', {
+        text: 'React Hook Component Server Render'
+      });
+    }
+
 
   };
 };

app/router.js

@@ -7,6 +7,7 @@ module.exports = app => {
   router.get('/csr', controller.blog.index.csr);
   router.get('/node', controller.blog.index.node);
   router.get('/example/stateless', controller.example.index.statelessRender);
+  router.get('/example/hook', controller.example.index.reactHook);
   router.get('/example/async', controller.example.index.asyncComponentRender);
   router.get('/example/data/node', controller.example.data.nodeDataRender);
   router.get('/example/data/async', controller.example.data.asyncDataRender);

app/web/page/blog/router/example.jsx

@@ -12,6 +12,7 @@ export default class Example extends Component {
     };
     return <div>
       <h2 style={{...styleTitle}}>Egg React Example</h2>
+      <h4 style={{...styleSub}}><a target="_blank" href="/example/hook">React Hook Render</a></h4>
       <h4 style={{...styleSub}}><a target="_blank" href="/example/async">React Async Component Render</a></h4>
       <h4 style={{...styleSub}}><a target="_blank" href="/example/stateless">React Stateless Component Render</a></h4>
       <h4 style={{...styleSub}}><a target="_blank" href="/example/data/node">React Server Render for Node Data Mode</a></h4>

app/web/page/example/hook.jsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+
+import request from '../../framework/request';
+import Layout from 'component/layout';
+
+function HookAsyncDataMode(props) {
+  const [data] = useState({
+    title: props.title,
+    article: props.article
+  });
+  return (<Layout>
+    <h2 className="easy-article-detail-title">{data.article.title}</h2>
+    <div className="easy-article-info">
+      <iframe src={data.article.url} frameBorder="0" width="100%" style={{minHeight: '800px'}}></iframe>
+    </div>
+  </Layout>);
+}
+
+HookAsyncDataMode.asyncData = async function(locals) {
+  return request.get('/example/data/api/article', locals);
+}
+
+export default  HookAsyncDataMode;

webpack.config.js

@@ -11,7 +11,8 @@ module.exports = {
     async: 'app/web/page/example/async/index.jsx',
     'example/stateless': 'app/web/page/example/stateless.js',
     'example/node': 'app/web/page/example/node.jsx',
-    'example/data': 'app/web/page/example/data.jsx'
+    'example/data': 'app/web/page/example/data.jsx',
+    'example/hook': 'app/web/page/example/hook.jsx'
   },
   plugins:[
     { imagemini: false },