fix(ssr): csr 和 dynamicImport 一起使用导致组件 2 次 mount

[Baoyx007]

Checklist

• npm test passes
• commit message follows commit guidelines

Close #5881

Description of change

改变 Component 会导致一次强制重渲染. 而这样, 会让组件中的 didMount 被调用两次.

事实上, 只需要将新的 initialProps 传给 LoadableComponent, LoadableComponent 会将这个 props 传递下去.

这样, 第二次渲染就不是强制渲染了.

[ycjcl868]

ci 好像挂了

[codecov]

Codecov Report

Merging #6057 (2a2c36c) into master (706702a) will increase coverage by 0.00%.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##           master    #6057   +/-   ##
=======================================
  Coverage   82.94%   82.94%           
=======================================
  Files         158      158           
  Lines        3500     3501    +1     
  Branches      941      920   -21     
=======================================
+ Hits         2903     2904    +1     
  Misses        588      588           
  Partials        9        9           

Impacted Files	Coverage Δ
...s/renderer-react/src/renderRoutes/renderRoutes.tsx	96.82% <100.00%> (+0.05%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 706702a...2a2c36c. Read the comment docs.

[Baoyx007]

ci 好像挂了

不好意思, 已修复

[sorrycc]

加个用例吧。

[ycjcl868]

expect 渲染次数的用例

[ycjcl868]

/rebase

[ycjcl868]

试了下这样改还是会渲染两次

[Baoyx007]

试了下这样改还是会渲染两次

渲染是 2 次, mount 应该只有一次

[ycjcl868]

试了下，还是有问题

[ycjcl868]

@Baoyx007 我这里弄了一个 demo，还是 mount 2 次

import { useEffect, useRef } from 'react';
import { Link } from 'umi';

function IndexPage(props) {
  const ref = useRef(0);

  useEffect(() => {
    ref.current += 1;
  }, []);
  
  return (
    <div>
      <p>count:{ref.current}</p>
      <Link to="/news">/news</Link>
    </div>
  );
}

IndexPage.getInitialProps = () => {
  return {
    a: 111,
  };
};

export default IndexPage;

应该切回来 count 为 1，应该是 0 才对

[Baoyx007]

这是 mount 一次, 渲染了 2 次吧?

第一次 props 是 {}, mount 后 current +1 .
第二次 props 是{a:111}

由于渲染了两次, 所以你能看到 current 是 1.

[ycjcl868]

这是 mount 一次, 渲染了 2 次吧?

第一次 props 是 {}, mount 后 current +1 .
第二次 props 是{a:111}

由于渲染了两次, 所以你能看到 current 是 1.

umi 在切换时 mount 了两次，可能有问题

https://codesandbox.io/s/amazing-dust-wh1fh?file=/pages/index.js

[zhanghsoft]

这个问题解决了吗

[robinv8]

我也焦急等待中

[chj-damon]

焦急等待中...

[handycode]

我现在临时在 页面组件上 加上 React.memo 外包解决

[hejinguo]

这个问题还是存在