React簡書項目

本文將從以下幾個方面介紹React簡書項目：

1. 項目概述
2. 組件分析
3. 路由配置
4. Redux狀態管理
5. 項目優化

一、項目概述

React簡書項目是一個類似於博客的Web應用，提供用戶撰寫、發布、閱讀文章的功能。項目的主要技術棧為React、Redux、React-Router等。

該項目集成了很多優秀的前端組件，如輪播圖、評論功能、搜索等，提供了優秀的用戶交互體驗和功能。

二、組件分析

項目是以組件化方式開發的，下面介紹幾個重要的組件：

Header組件

Header組件是項目頂部的導航欄，包含了簡書logo、搜索框、首頁、下載等功能按鈕。以下是Header組件的代碼：

import React from 'react';
import { Link } from 'react-router-dom';
import { HeaderWrapper, Logo, Nav, NavItem, NavSearch, 
        Addition, Button } from './style';
const Header = () => {
  return (
    <HeaderWrapper>
      <Link to="/">
        <Logo />
      </Link>
      <Nav>
        <NavItem className='left active'>首頁</NavItem>
        <NavItem className='left'>下載App</NavItem>
        <NavSearch></NavSearch>
        <NavItem className='right'>登陸</NavItem>
        <NavItem className='right'><i className='iconfont'></i></NavItem>
      </Nav>
      <Addition>
        <Button className='writing'>寫文章</Button>
        <Button className='reg'>註冊</Button>
      </Addition>
    </HeaderWrapper>
  )
}
export default Header;

Topic組件

Topic組件是項目首頁右側的話題模塊，展示了熱門話題並支持用戶點擊查看更多詳情。以下是Topic組件的代碼：

import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { TopicWrapper, TopicItem } from '../style';
class Topic extends PureComponent {
  render() {
    const { topicList } = this.props;
    return (
      <TopicWrapper>
        {
          topicList.map((item) => (
            <TopicItem key={item.get('id')}>
              <img className='topic-pic' 
                   src={item.get('imgUrl')} alt='' /> 
              { item.get('title') }
            </TopicItem>
          ))
        }
      </TopicWrapper>
    )
  }
}
const mapStateToProps = (state) => ({
  topicList: state.getIn(['home', 'topicList'])
})
export default connect(mapStateToProps, null)(Topic);

三、路由配置

React-Router是React中非常重要的路由處理庫，React簡書項目中的路由按照功能劃分為兩個部分，分別是主頁部分和詳情頁部分。以下是路由配置的代碼：

import React, { PureComponent } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Header from './common/header';
import Home from './pages/home';
import Detail from './pages/detail';
import Login from './pages/login';
import { Globalstyle } from './style';
import { GlobalIconFontStyle } from './statics/iconfont/iconfont';
class App extends PureComponent {
  render() {
    return (
        <BrowserRouter>
          <div>
            <Header/>
            <Route path='/' exact component={Home} />
            <Route path='/detail/:id' exact component={Detail} />
            <Route path='/login' exact component={Login} />
          </div>
          <Globalstyle />
          <GlobalIconFontStyle />
        </BrowserRouter>
    )
  }
}
export default App;

四、Redux狀態管理

Redux是JavaScript狀態容器，提供一種可預測化的狀態管理。React簡書項目中使用Redux來管理各個組件的公共狀態。以下是store的代碼：

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';
const composeEnhancers = 
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? 
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(applyMiddleware(thunk));
// 創建store
const store = createStore(reducer, enhancer);
export default store;

五、項目優化

React簡書項目在性能優化上做了比較多的工作，如路由異步加載、組件懶加載、代碼分割等。下面以路由異步加載為例，介紹項目中的優化措施：

import React, { PureComponent } from 'react';
import Loadable from 'react-loadable';
// 異步加載組件
const LoadableComponent = Loadable({
    loader: () => import('./index'),
    loading() {
        return <div>正在加載...</div>;
    }
});
export default () => <LoadableComponent />;

通過使用React-Loadable庫，項目中的路由可以異步加載，在大幅提升頁面加載速度的同時，還提升了用戶體驗。