layout的公共组件优化无效的问题

[tkgkn]

我将官方demo中的 web/layout/index.js中将头部组件抽出，然后观察切换路由时发现头部组件每次都会渲染，即便我在shouldComponentUpdate中直接返回false也无效。

最小实现： 修改官方demo中的web/layout/index.js文件。粘贴如下代码，然后切换文章路由再返回即可发现header一直在渲染。

class NormalHeader extends React.Component {
  shouldComponentUpdate() {
    return false;
  }

  render() {
    console.log("header render");
    return (
      <h1 className="title">
        <Link to="/">Egg + React + SSR</Link>
        <div className="author">by ykfe</div>
      </h1>
    );
  }
}

const commonNode = props =>
  // 为了同时兼容ssr/csr请保留此判断，如果你的layout没有内容请使用 props.children ?  props.children  : ''
  props.children ? (
    <div className="normal">
      <NormalHeader />
      {props.children}
    </div>
  ) : (
    ""
  );

[zhangyuang]

切换路由时发现头部组件每次都会渲染本来就是正常情况，不同页面的header的render结果不一定一样

[zhangyuang]

你这个NormalHeader是两个instance shouldComponentUpdate是控制同一个instance在props改变的时候要不要重新render

[tkgkn]

你这个NormalHeader是两个instance shouldComponentUpdate是控制同一个instance在props改变的时候要不要重新render

意思是，每次路由切换，整个页面都会被完整替换了，即便我写了公用的header和footer，它们的内容也一样，路由切换时，2个页面的header和footer又渲染了一次。

[tkgkn]

😯，看出来了，entry.js里面Route直接render的就是Layout和其children，怪不得优化无效了。