1. 性能优化

在之前的首页中，几乎每个组件都调用了connect方法连接了Redux，所以只要有数据发生改变，所有组件都会进行重新渲染。可能某些组件与改变的数据无关，也会重新渲染。

为了避免无必要的比较和渲染，我们可以使用PureComponent。PureComponent在组件中底层实现了一个shouldComponentUpdate函数。

使用PureComponent需要与Immutable.js配合使用才能避免潜在的问题。因此，如果使用PureComponent，建议使用Immutable.js来管理数据，否则最好使用Component。

这里再总结一些常见优化点，就不一一展开了：

减少渲染次数：使用React.memo或PureComponent来避免不必要的渲染。React.memo用于函数式组件，而PureComponent用于class组件。
使用shouldComponentUpdate方法：手动控制是否要渲染组件，可以避免一些不必要的渲染，提高性能。
使用React.lazy和React.Suspense：按需加载组件，可以减少首屏加载时间。
避免不必要的组件嵌套：过多的组件嵌套会导致性能下降，应该尽量避免。
避免在render方法中调用setState：这样会导致多次render，应该在其他生命周期或事件处理程序中进行setState。
使用Immutable.js或其他不可变数据结构：避免不必要的对象复制和引用比较，提高性能。
合理使用Redux中间件：例如使用thunk或saga可以避免多次请求或重复操作。
避免过度使用高阶组件：高阶组件的使用过度会导致组件层次更深，不必要的props传递和函数嵌套。

2. 详情页跳转-单页路由

在单页应用跳转时，我们可以使用react-router-dom模块。如果这样写，每次点击都会加载一次HTML，这是比较耗性能的：

<a href='/detail'></a>

我们可以使用Link组件进行路由跳转：

import { Link } from 'react-router-dom';

class List extends PureComponent {
  render() {
    const { list, getMoreList, page } = this.props;
    return (
      <div>
        {list.map((item, index) => {
          return (
            <Link key={index} to={'/detail'}>
              <ListItem>
                <img className='pic' src={item.get('imgUrl')} alt='' />
                <ListInfo>
                  <h3 className='title'>{item.get('title')}</h3>
                  <p className='desc'>{item.get('desc')}</p>
                </ListInfo>
              </ListItem>
            </Link>
          )
        })}
        <LoadMore onClick={(page) => getMoreList(page)}>更多文字</LoadMore>
      </div>
    );
  }
}

为了实现点击简书回到首页的功能，可以添加一个Link组件：

<Link to={'/'}>
  <Logo />
</Link>

可能是由于Header组件和App组件的Route是并列的。可以将Header组件放到BrowserRouter组件内：

function App() {
  return (
    <Provider store={store}>
      <BrowserRouter>
        <div>
          <Header />
          <Route path='/' exact component={Home}></Route>
          <Route path='/detail' exact component={Detail}></Route>
          <GlobalIconfont />
          <GlobalBody />
        </div>
      </BrowserRouter>
    </Provider>
  );
}

实战首页：首页性能优化与路由跳转

1. 性能优化

2. 详情页跳转-单页路由