chore: 使用pathname作为namespace来隔离组件的首次render的props获取防止属性污染

moligit · Mar 27, 2020 · 28cbc14 · 28cbc14
1 parent dcb939c
commit 28cbc14
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 12 deletions.
diff --git a/example/ssr-with-js/package.json b/example/ssr-with-js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ssr-with-js",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "dependencies": {
     "egg": "^2.21.0",
     "egg-scripts": "^2.11.0",

diff --git a/example/ssr-with-js/web/layout/index.js b/example/ssr-with-js/web/layout/index.js
@@ -33,7 +33,7 @@ const Layout = (props) => {
           <div id='app'>{ commonNode(props) }</div>
           {
             serverData && <script dangerouslySetInnerHTML={{
-              __html: `window.__USE_SSR__=true; window.__INITIAL_DATA__ =${serialize(serverData)}`
+              __html: `window.__USE_SSR__=true; window.__INITIAL_DATA__ ={"${props.layoutData.req.url}":${serialize(serverData)}}` // 使用pathname作为组件初始化数据的隔离，防止props污染
             }} />
           }
           <div dangerouslySetInnerHTML={{

diff --git a/example/ssr-with-ts/package.json b/example/ssr-with-ts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ssr-with-ts",
-  "version": "2.3.7",
+  "version": "2.3.8",
   "description": "ykfe",
   "dependencies": {
     "egg-scripts": "^2.10.0",

diff --git a/example/ssr-with-ts/web/layout/index.tsx b/example/ssr-with-ts/web/layout/index.tsx
@@ -39,7 +39,7 @@ const Layout: SFC<LayoutProps> = (props: LayoutProps): JSX.Element | null => {
           <div id='app'>{commonNode(props)}</div>
           {
             serverData && <script dangerouslySetInnerHTML={{
-              __html: `window.__USE_SSR__=true; window.__INITIAL_DATA__ =${serialize(serverData)}`
+              __html: `window.__USE_SSR__=true; window.__INITIAL_DATA__ ={"${props.layoutData!.req.url}":${serialize(serverData)}}` // tslint:disable-line
             }} />
           }
           <div dangerouslySetInnerHTML={{

diff --git a/packages/ykfe-utils/package.json b/packages/ykfe-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ykfe-utils",
-  "version": "3.5.9",
+  "version": "3.5.10",
   "description": "utils for ykfe",
   "main": "lib/index.js",
   "module": "es/index.js",

diff --git a/packages/ykfe-utils/src/components/getinitialProps.tsx b/packages/ykfe-utils/src/components/getinitialProps.tsx
@@ -11,7 +11,7 @@ const popStateFn = () => {
 }
 
 interface IState {
-  getProps: boolean,
+  initialProps: any
   extraProps: Object
 }
 
@@ -21,17 +21,18 @@ function GetInitialProps (WrappedComponent: FC): React.ComponentClass {
       super(props)
       this.state = {
         extraProps: {},
-        getProps: false
+        initialProps: window.__INITIAL_DATA__ && window.__INITIAL_DATA__[location.pathname] // 使用pathname来防止不同页面的初始props冲突
       }
     }
 
     async componentDidMount () {
       const props = this.props
       if (window.__USE_SSR__) {
         _this = this // 修正_this指向，保证_this指向当前渲染的页面组件
-        window.addEventListener('popstate', popStateFn)
+        window.addEventListener('popstate', popStateFn) // history.pushState和history.replaceState方法并不会触发popstate事件。因此需要另外判断当前action是否为push/replace
       }
-      const getProps = !window.__USE_SSR__ || (props.history && props.history.action === 'PUSH')
+      const getProps = !window.__USE_SSR__ || props.history && props.history.action === ('PUSH' || 'REPLACE')
+
       if (getProps) {
         await this.getInitialProps()
       }
@@ -46,14 +47,13 @@ function GetInitialProps (WrappedComponent: FC): React.ComponentClass {
       }
       const extraProps = WrappedComponent.getInitialProps ? await WrappedComponent.getInitialProps(props) : {}
       this.setState({
-        extraProps,
-        getProps: true
+        extraProps
       })
     }
 
     render () {
       // 只有在首次进入页面需要将window.__INITIAL_DATA__作为props，路由切换时不需要
-      return <WrappedComponent {...Object.assign({}, this.props, this.state.getProps ? {} : window.__INITIAL_DATA__, this.state.extraProps)} />
+      return <WrappedComponent {...Object.assign({}, this.props, window.__INITIAL_DATA__, this.state.initialProps, this.state.extraProps)} />
     }
   }
   return withRouter(GetInitialPropsClass)