Redux打造的同构Web应用,轻松管理状态

作者: 前端知识  发布:2019-11-28

页面加载速度的修改

总结

Redux 是一个高级景况管理库,相符在创设大面积 React 应用时使用。另一面,Context API 能够用来字节大小等第数据变动的小圈圈 React 应用中。通过运用 Context API,你不用像 reducersactions 等相近编写大批量代码,就会经过情景变化完毕逻辑表现。

1 赞 收藏 评论

图片 1

网页浏览量(Pageviews卡塔尔

 图片 2

z-ga-pv.png

因为二零一四年6月有一个人盛名的博客主成为了火爆话题,所以那个指标内包蕴特殊情况。网页浏览量提高了57.15%。如若将紧俏话题所带给的数值除去后,实际上唯有由系统重构所拉动的提拔在一成到五分一里面。

React Context API 指南

The React Context API 提供了生龙活虎种通过组件树传递数据的诀窍,而无需经过 props 属性生龙活虎稀罕的传递。在 React 中,数据通常会作为四性格能从父组件传递到子组件。

利用新型的 React Context API 要求多少个关键步骤:

  1. 将启幕状态传递给 React.createContext。那一个方法会再次回到二个含有 ProviderConsumer 的对象。
  2. 使用 Provider 组件封装在组件树的最外层,并收受贰个 value 属性。value 属性能够是别的值。
  3. 使用 Consumer 组件,在组件树中 Provider 组件内部的别的地点都能取得到状态的子集。

如你所见,所涉及的概念实际上与 Redux 没有啥两样。事实上,以致 Redux 也在其公共 API 的最底层使用了 React Context API。但是,直到近年来,Context API 才达到了十足成熟的品位。

渲染(Rendering)

 图片 3

z-speed-rendering.png

渲染速度做为前端的最首要性能指标,本次 提升了44.68%

品种要求

鉴于本文仅使用 React 和生龙活虎部分 NPM 库,因而除了 Node.js 和 NPM 之外,你怎么样都不要求。假若您还从未设置 Node.js 和 NPM,请前往官网下载并安装。

安装那一个信任后,你还须要设置 create-react-app 工具。那一个工具匡助开辟职员创制 React 项目。张开一个极限并运营以下命令来安装:

npm i -g create-react-app

1
npm i -g create-react-app

Docker

这一次系统重构,也对node.js应用进行docker化创设。此番重构的是前面三个系统,大家期待能够在细微改过之后立即进行配置。docker化之后,意气风发旦将镜像构建达成,能够不受node模块版本的左右举办安插,回滚也相当轻便。

别的,node.js本人公布极度频仍,倘若放置不管,悄然无息之间系统就成古董了。docker化之后,能够不受各主机情形的熏陶自由的拓宽升级换代。

更关键的是,设置docker容器数是相比易于的,那对于系统横向扩大体积以至对服务器配置作优化时也要命便于。

使用 Redux 创建 React 应用

看来,本文的指标是向您出示新的 Context API 如何在Mini应用中代表 Redux。因而,你首先要用 Redux 创立八个大约的 React app,然后,你将学习如何删除那么些场合管理库,以便更加好地接收 React Context API。

你将营造的示范应用是一个甩卖局地风行食品及其来源的列表。那么些应用还将包蕴多个追寻功能,使顾客能够基于局地最首要词过滤列表。

末尾,你将创建二个近乎下边所述的采纳:

Pages

作为页面的页面组件。基本上是把传递过来的 this.props.children 自始至终的显得出来。由于Ameblo是单页面应用,由此唯有叁个页面组件。

Redux 神速回想

在直接奔向主旨以前,我们先来火速回顾下 Redux,以便大家更加好的可比两个的差别。redux 是三个方便人民群众状态处理的 JavaScript 库。Redux 本人和 React 并不曾关系。来自世界外地的很多开拓者选拔在风靡的前端框架(比方 ReactAngular )中使用 Redux。

说美赞臣(Meadjohnson卡塔 尔(阿拉伯语:قطر‎些,在本文中,状态管理指的是拍卖单页面应用(SPA卡塔尔中生出的依据特定事件而接触的情况变化。比方,一个按键的点击事件依然一条来源于服务器的异步消息等,都能够接触应用状态的生成。

在 Redux 中,你更加的必要小心上面几点:

  1. 整套 app 的气象存款和储蓄在单个对象中(该对象被称作数据源卡塔 尔(英语:State of Qatar)。
  2. 只要要改成状态,你须要经过 dispatch 方法触发 actions,actions 描述了应该生出的事体。
  3. 在 Redux 中,你不可能改革对象的性质或改革现存数组,必得始终再次来到新目的或新数组。

倘令你对 Redux 并不熟稔而且你想要了然越来越多,请移步 Redux 的实用教程学习。

改善点

系统重构前,通过 SpeedCurve 实行分析,得出了下边结论:

  • 服务器响应速度相当的慢
  • HTML文书档案一点都不小(页面全体因素都满含此中卡塔 尔(英语:State of Qatar)
  • 拥塞页面渲染的财富(JavaScript、Stylesheet卡塔尔超级多
  • 财富读取的次数过多,体量过大

依附这个规定了下边这几项基本布署:

  • 为了不致于减少服务器响应速度,对代码进行优化,缓存等
  • 尽可能减弱HTML文书档案大小
  • JavaScript异步地加载与试行
  • 前期显示页面时,仅仅加载所需的须要能源

React Context API: 轻巧管理情状

2018/09/03 · JavaScript · React

原稿出处: Abdulazeez Adeshina   译文出处:OFED   

应用最新的 React Context API 管理意况特别轻易。现在就跟随笔者联合读书下它和 Redux 的界别以致它是怎么着运用的吗。

**综述:**React Context API 在 React 生态系统中而不是个新鲜事物。可是,在 React 16.3.0 版本中做了部分改进。那些改正是那般大侠,甚至于大大减弱了作者们对 Redux 和任何高等状态管理库的供给。在本文中,你将经过三个实用教程精通到新的 React Context API 是哪些代替 Redux 实现Mini应用的意况管理的。

原子设计(Atomic Design卡塔 尔(英语:State of Qatar)

对于组件的安顿性,大家选取了 原子设计 思想。其实项目并从未生机勃勃上马就利用原子设计,而是基于 Presentational and Container Components ,对 containercomponent 举行了两层划分。但是Ameblo中的组件实乃太多,超轻便招致职务不了然的境况,由此最后使用了原子设计意见。项目标骨子里运用中,接受了以下的规规矩矩。

 图片 4

z-atomic-design.png

创建 React 界面

前天,你早已到位了运用中的核心代码,你能够小心于创设你的顾客分界面。为此,张开你的 App.js 文件,用下方代码替换它的内容:

import React from 'react'; import {connect} from 'react-redux'; import actions from './actions'; import './App.css'; function App({food, searchTerm, searchTermChanged}) { return ( <div> <div className="search"> <input type="text" name="search" placeholder="Search" value={searchTerm} onChange={e => searchTermChanged(e.target.value)} /> </div> <table> <thead> <tr> <th>Name</th> <th>Origin</th> <th>Continent</th> </tr> </thead> <tbody> {food.map(theFood => ( <tr key={theFood.name}> <td>{theFood.name}</td> <td>{theFood.origin}</td> <td>{theFood.continent}</td> </tr> ))} </tbody> </table> </div> ); } export default connect(store => store, actions)(App);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import React from 'react';
import {connect} from 'react-redux';
import actions from './actions';
import './App.css';
 
function App({food, searchTerm, searchTermChanged}) {
  return (
    <div>
      <div className="search">
        <input
          type="text"
          name="search"
          placeholder="Search"
          value={searchTerm}
          onChange={e => searchTermChanged(e.target.value)}
        />
      </div>
      <table>
        <thead>
        <tr>
          <th>Name</th>
          <th>Origin</th>
          <th>Continent</th>
        </tr>
        </thead>
        <tbody>
        {food.map(theFood => (
          <tr key={theFood.name}>
            <td>{theFood.name}</td>
            <td>{theFood.origin}</td>
            <td>{theFood.continent}</td>
          </tr>
        ))}
        </tbody>
      </table>
    </div>
  );
}
 
export default connect(store => store, actions)(App);

对此未用过 Redux 的人来讲,他们唯一素不相识的是用于封装 App 组件的 connect 方法。这一个格局其实是多少个高阶组件( HOC ),当做应用程序和 Redux 之间的粘附剂。

动用以下命令运营你的接受,你将能够在浏览器中做客你的使用:

npm run start

1
npm run start

然则,正如您所观察的,那几个利用今后很丢脸。因而,为了让它看起来更加好一些,你能够展开 App.css 文件,用以下内容替换它的内容:

table { width: 100%; border-collapse: collapse; margin-top: 15px; line-height: 25px; } th { background-color: #eee; } td, th { text-align: center; } td:first-child { text-align: left; } input { min-width: 300px; border: 1px solid #999; border-radius: 2px; line-height: 25px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  line-height: 25px;
}
 
th {
  background-color: #eee;
}
 
td, th {
  text-align: center;
}
 
td:first-child {
  text-align: left;
}
 
input {
  min-width: 300px;
  border: 1px solid #999;
  border-radius: 2px;
  line-height: 25px;
}

图片 5

完了了!你以往有了叁个大旨的 React 和 Redux 的运用,能够起来读书怎么迁移到 Context API 上了。

页面加载时间(Page Load Time卡塔 尔(阿拉伯语:قطر‎

 图片 6

z-speed-pageload.png

页面加载时间 缩短了40.5 !别的,后端的归来时间也保持在了0.2ms ~ 0.3ms之间。

接下去介绍一下相关的职业指标。

利用 React Context API 实现接纳

在本节,你将在学习怎么将您的 Redux 应用迁移到 React Context API 上。

幸好的是,你无需在 Redux 和 Context API 之间做过多的重构。

率先,你必须要从您的运用中移除 Redux 组件。为此,请展开终端,删除 reduxreact-redux 库:

npm rm redux react-redux

1
npm rm redux react-redux

从此未来,删除应用中对那个库的援用代码。张开 App.js 删除以下几行:

import {connect} from 'react-redux'; import actions from './actions';

1
2
import {connect} from 'react-redux';
import actions from './actions';

然后,在长久以来的公文中,用下方的代码替换最终风流洒脱行(以 export default 发轫的那大器晚成行卡塔 尔(英语:State of Qatar):

export default App;

1
export default App;

通过那么些更改,你可以用 Context API 重写你的运用了。

作者介绍:

作者:原 百分之十(Hara Kazunari卡塔 尔(英语:State of Qatar),2009年步向日本CyberAgent集团。担负Ameblo 2014移动前端改版项目首脑导。著有《GitHubの教科書》,《CSS3逆引きデザインレシピ》,《フロントエンドエンジニア育成読本》。

翻译:侯 斌(Hou Bin卡塔 尔(阿拉伯语:قطر‎,2015年入职东瀛CyberAgent集团。现任Ameblo前端开垦。在此番Ameblo 二〇一五移动前端改版项目中出任重先生要支出,担任底工架会谈本事选型以致入眼模块开垦等。

1 赞 收藏 评论

图片 7

搭建 React 应用

安装完 create-react-app 后,踏入项目所在目录,试行以下命令:

create-react-app redux-vs-context

1
create-react-app redux-vs-context

几分钟后,create-react-app 将成功应用程序的始建。在那之后,步入该工具成立的新目录,并安装 Redux:

# 步向应用目录 cd redux-vs-context # 安装 Redux npm i --save redux react-redux

1
2
3
4
5
# 进入应用目录
cd redux-vs-context
 
# 安装 Redux
npm i --save redux react-redux

注意: redux 是主库,react-redux 是推进 React 和 Redux 之间交互作用的库。简单的说,后面一个充作 React 和 Redux 之间的代理。

系统的现代化(搭乘生态系统卡塔尔国

往昔的Web应用是将数据以HTML的样式再次来到,那个时候并不曾什么难点。可是,随着剧情的加码,体验的丰硕化,以致配备的三种化,使得前端所占的比例进一层大。在此早先要开销多少个好的Web应用,固然要高质量,就必定不要将左右端分隔绝。当年以这些供给开垦的种类,在经历了10年之后,已经远远不能够适应现阶段的生态系统。

「跟上近年来生态系统」,以此来创设系统会带给巨额的裨益。因为作为大旨的生态系统,其付出极其活跃,天天都会有数以十万计新的idea。因此新型的技术和成效更易于被采取,同不经常间实现高品质也更加的便于。同期,那些「新」对于年轻的本领新人也愈发重大。仅知道旧准则旧才能的老伯对于一个地道的团伙来讲是平素不前程的(自觉本人膝馒头也中了一箭卡塔尔。

题外话:使用 Auth0 使您的 React 应用更安全

原来的文章中有关于 Auth0 使用的亲力亲为教程,但译者以为这里内容和本文主旨关系相当小,故不作翻译。感兴趣者可活动原文阅读该片段内容。

同构Web应用(Isomorphic web app)

Ameblo 2015年版基本上完全都以用JavaScript重写的。不论是Node服务器上大概客户端上都利用了豆蔻年华致的代码和流程,也正是所谓的同构Web应用。项目标目录构造概略上上如下所示,服务器端的入口文件是 server.js ,浏览器的输入文件是 client.js

  • actions/ Redux Action (服务器,客商端共用卡塔尔国
  • api/ 封装的API接口
  • components/ React组件 (服务器,顾客端共用卡塔 尔(阿拉伯语:قطر‎
  • reducer/ <span class=”underline”>Redux Reducers</span> (服务器,客商端共用卡塔尔国
  • services/ 服务层模型,使用 Fetchr 对数码央浼进行伏贴粒度的撤销合并。同时那些也使得node.js作为代理,直接央浼API(服务器专项使用卡塔 尔(阿拉伯语:قطر‎。
  • server.js 服务器入口(服务器专项使用卡塔尔国
  • app.js node服务器的安排、运转,由server.js调用(服务器专用卡塔 尔(英语:State of Qatar)
  • client.js 客商端入口(客商端专项使用卡塔 尔(阿拉伯语:قطر‎

 图片 8

z-isomorphic.png

写好的JavaScript同期运营在劳动器端依然顾客端上的运行行为、以致从数据读取直到在页面上海展览中心示停止的总体浏程,都以同样的格局举办。

图片 9

z-code-stats.png

选取Github的言语计算能够看到,JavaScript占了任何项指标94.0%,大致全部是由JavaScript写成的。

从 Redux 迁移到 React Context API

要将在此以前的应用从 Redux 驱动的利用转变为运用 Context API,你必要贰个context 来积攒应用的数额(该 context 将替换 Redux Store)。别的,你还索要五个 Context.Provider 组件,该零零件满含 stateprops 和平常的 React 组件生命周期。

为此,你须求在 src 目录中开创贰个 providers.js 文件,并向此中加多以下代码:

import React from 'react'; import Food from './foods'; const DEFAULT_STATE = { allFood: Food, searchTerm: '' }; export const ThemeContext = React.createContext(DEFAULT_STATE); export default class Provider extends React.Component { state = DEFAULT_STATE; searchTermChanged = searchTerm => { this.setState({searchTerm}); }; render() { return ( <ThemeContext.Provider value={{ ...this.state, searchTermChanged: this.searchTermChanged, }}> {this.props.children} </ThemeContext.Provider>); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from 'react';
import Food from './foods';
 
const DEFAULT_STATE = { allFood: Food, searchTerm: '' };
 
export const ThemeContext = React.createContext(DEFAULT_STATE);
 
export default class Provider extends React.Component {
  state = DEFAULT_STATE;
  searchTermChanged = searchTerm => {
    this.setState({searchTerm});
  };
 
  render() {
    return (
      <ThemeContext.Provider value={{
        ...this.state,
        searchTermChanged: this.searchTermChanged,
      }}> {this.props.children} </ThemeContext.Provider>);
  }
}

地方代码中定义的 Provider 类担负将其余零件封装在 ThemeContext.Provider 中。通过那样做,你能够让那一个组件访谈应用中的 state 和改变 state 的 searchTermChanged 方法。

若要在组件树中运用这几个值,你须要创立一个 ThemeContext.Consumer 组件。这几个组件将急需二个 render 渲染方法,该办法将抽取上述 props 值作为参数。

进而,接下去,你要求在 src 目录中制造八个名叫 consumer.js 的文本,并将以下代码写入此中:

import React from 'react'; import {ThemeContext} from './providers'; export default class Consumer extends React.Component { render() { const {children} = this.props; return ( <ThemeContext.Consumer> {({allFood, searchTerm, searchTermChanged}) => { const food = searchTerm ? allFood.filter( food => food.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1 ) : allFood; return React.Children.map(children, child => React.cloneElement(child, { food, searchTerm, searchTermChanged, }) ); }} </ThemeContext.Consumer> ); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React from 'react';
import {ThemeContext} from './providers';
 
export default class Consumer extends React.Component {
  render() {
    const {children} = this.props;
 
    return (
      <ThemeContext.Consumer>
        {({allFood, searchTerm, searchTermChanged}) => {
          const food = searchTerm
            ? allFood.filter(
              food =>
                food.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1
            )
            : allFood;
 
          return React.Children.map(children, child =>
            React.cloneElement(child, {
              food,
              searchTerm,
              searchTermChanged,
            })
          );
        }}
      </ThemeContext.Consumer>
    );
  }
}

于今,为了成功搬迁,你将开荒 index.js 文件,并在 render() 函数中,用 Consumer 组件封装 App 组件。其余,你供给将 Consumer 包装在 Provider 组件中。代码如下所示:

import React from 'react'; import ReactDOM from 'react-dom'; import Provider from './providers'; import Consumer from './consumer'; import App from './App'; ReactDOM.render( <Provider> <Consumer> <App /> </Consumer> </Provider>, document.getElementById('root') );

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from 'react';
import ReactDOM from 'react-dom';
import Provider from './providers';
import Consumer from './consumer';
import App from './App';
 
ReactDOM.render(
  <Provider>
    <Consumer>
      <App />
    </Consumer>
  </Provider>,
  document.getElementById('root')
);

打完收工!你刚刚完毕了从 Redux 到 React Context API 的迁徙。假诺您现在起动你的利用,你会开采整整应用运维如常。独一不相同的是,你的接收不再使用 Redux 了。

“新扩张的 React Context API 在收缩应用容量方面是 Redux 的杰出替代品。”

推迟加载

我们应用SS卡宴 SPA的艺术来优化页面间跳转这种横向移动的进程,况兼利用延缓加载来矫正页面包车型大巴纵向移动速度。生龙活虎开首要突显的剧情以致导航,还只怕有博客作品等最先展现,在这里些剧情之下的附带内容随着页面包车型大巴滚动渐渐展现。那样一来,主要的剧情不会受页面上边内容的熏陶而更加快的展现出来。对于这个想尽快读作品的顾客来讲,既不扩充客户体验上的下压力,又能完好的提供页面下方的从头到尾的经过。

 图片 10

z-lazyload.png

在此之前的体系因为将页面内的全体内容都置于HTML文书档案里,所以使得HTML文书档案体积非常大。而近些日子的系列,仅仅将重要内容放到HTML里再次回到,缩小了HTML的体积和多少央求的朗朗上口。

使用 Redux 开发 React 应用

你早就搭建好了你的 React 应用,安装好了 Redux,今后,在您欣赏的开辟工具中开辟你的门类。然后在 src 文件夹中创建多个公文:

  • foods.json :此文件包含贰个用以保存食品及其来源新闻的静态数组
  • reducers.js:此文件用于管理接纳中 Redux 状态
  • actions.js:此文件用于保存应用中触发 Redux 状态改动的秘技

所以,首先,打开 foods.json 文件,增添如下内容:

[ { "name": "Chinese Rice", "origin": "China", "continent": "Asia" }, { "name": "Amala", "origin": "Nigeria", "continent": "Africa" }, { "name": "Banku", "origin": "Ghana", "continent": "Africa" }, { "name": "Pão de Queijo", "origin": "Brazil", "continent": "South America" }, { "name": "Ewa Agoyin", "origin": "Nigeria", "continent": "Africa" } ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
[
  {
    "name": "Chinese Rice",
    "origin": "China",
    "continent": "Asia"
  },
  {
    "name": "Amala",
    "origin": "Nigeria",
    "continent": "Africa"
  },
  {
    "name": "Banku",
    "origin": "Ghana",
    "continent": "Africa"
  },
  {
    "name": "Pão de Queijo",
    "origin": "Brazil",
    "continent": "South America"
  },
  {
    "name": "Ewa Agoyin",
    "origin": "Nigeria",
    "continent": "Africa"
  }
]

如您所见,文件存储的数目并未有怎么非常。仅仅是一个暗含着不一样国度不一样食品的数组。

在概念了 foods.json 文件后,你能够小心于创建你的 Redux store 了。回看一下,store 是保存你的利用真实际情形况的必由之路来源。张开你的 reducers.js 文件,加多以下代码:

import Food from './foods'; const initialState = { food: Food, searchTerm: '', }; export default function reducer(state = initialState, action) { // 根据 action type 区分 switch (action.type) { case 'SEARCH_INPUT_CHANGED': const {searchTerm} = action.payload; return { ...state, searchTerm: searchTerm, food: searchTerm ? Food.filter( (food) => (food.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1) ) : Food, }; default: return state; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import Food from './foods';
 
const initialState = {
  food: Food,
  searchTerm: '',
};
 
export default function reducer(state = initialState, action) {
  // 根据 action type 区分
  switch (action.type) {
    case 'SEARCH_INPUT_CHANGED':
      const {searchTerm} = action.payload;
      return {
        ...state,
        searchTerm: searchTerm,
        food: searchTerm ? Food.filter(
          (food) => (food.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1)
        ) : Food,
      };
    default:
      return state;
  }
}

在上头的代码中,你可以看来 reducer 方法选择多少个参数:stateaction。当你运转你的 React 应用,那些格局将收获它前边定义的 initialState,当你 dispatch 一个 action 的实例时,那个点子将赢妥贴前场合(不再是 initialState)。然后,基于这些actions 的内容,reducer 方法将为您的应用生成一个新的处境。

接下去,你须求定义这么些 actions 做哪些。实际上,为了简单起见,你将概念三个十足的 action ,当客户在你的使用中输入寻觅词时,这几个 action 会被触发。由此,张开 actions.js 文件,并在里边插入以下代码:

function searchTermChanged(searchTerm) { return { type: 'SEARCH_INPUT_CHANGED', payload: {searchTerm}, }; } export default { searchTermChanged, };

1
2
3
4
5
6
7
8
9
10
function searchTermChanged(searchTerm) {
  return {
    type: 'SEARCH_INPUT_CHANGED',
    payload: {searchTerm},
  };
}
 
export default {
  searchTermChanged,
};

action 成立好之后,你必要做的下生龙活虎件事正是将您的 App 组件封装到 react-redux 提供的 Provider 组件中。Provider 统风度翩翩承当 React 应用的数据(即 store)传递。

要运用 provider ,首先,你将利用 reducers.js 中定义的 initialState 创建 store。然后,通过 Provider 组件,你将把 store 传给您的 App。要到位那些职分,你必需张开 index.js 文件,并将其内容替换为:

import React from 'react'; import ReactDOM from 'react-dom'; import {Provider} from 'react-redux'; import {createStore} from 'redux'; import reducers from './reducers'; import App from './App'; // 使用 reducers 音信创设 store。 // 那是因为 reducers 是 Redux Store 的操纵中央。 const store = createStore(reducers); ReactDOM.render( <Provider store={store}> <App/> </Provider>, document.getElementById('root') );

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import reducers from './reducers';
import App from './App';
 
// 使用 reducers 信息创建 store。
// 这是因为 reducers 是 Redux Store 的控制中心。
const store = createStore(reducers);
 
ReactDOM.render(
  <Provider store={store}>
    <App/>
  </Provider>,
  document.getElementById('root')
);

正是这么!你恰好在 React 应用中布署完 Redux。以后,你必得兑现 UI (客商分界面),那样您的客户就足以选择本节中达成的效果与利益了。

智能手提式有线电话机时期的客户分界面

二零一四年在运动碰到下使用的客商大概都在运用智能机。在智能手提式有线电电话机上,由于各种平台的提供者制定了各自分化的顾客分界面规范,顾客已经见惯司空并适应了客商分界面。相比较之下,虽说浏览器上的正经八百少之甚少,可是即使和今后风行的分界面差异太大的话,就能变得很难用。

Ameblo的无绳电电话机版在二零零六年开展改版之后,自然对有个别细节进行了改正,可是出于并未有太大的变动,所以今后一句话来讲众多地点已经给人意气风发种很旧的回想。顾客在浏览的时候,对于分界面并不区分是原生应用依旧浏览器,因此制作出适应当前一代这些平台的客商分界面显示越发重大。这里介绍一下这一次重构中,对于分界面包车型客车有个别进级。

 图片 11

z-update-design.png

剧情杀绝分界面上横向整个空间。二〇一〇年的时候,日常选取推特倡导的「将相继模块圈起来的统筹」。

图片 12

z-searchbar.gif

扩张了导航栏,把导航相关操作聚集停放在这里。

不再「咯噔」

系统重构以前的Ameblo由于存在一些莫斯中国科学技术大学学未有定点的模块,现身了「咯噔」现象。这种「咯噔」会以致误点击以至页面包车型地铁重绘,十一分令人疾首蹙额。而此模块中度稳固也做为此次系统重构的UI设计的前提。特别是页面间导航作为十三分要害的要素,我们经过努力使得在页面跳转时老是都足以触击到同少年老成之处。

图片 13

z-gatan.gif

「咯噔」的三个例子。点击[次のページ](下生龙活虎页卡塔 尔(阿拉伯语:قطر‎的时候,额外的要素由于加载缓慢,形成误点击。

 图片 14

z-paging-fixed.gif

系统重构之后,成分的地点被固化下来,缓慢解决了页面跳转时给顾客激情上带给的担任。

写在最后

此番系统重构的视角是对能力的挑衅,结果拿到了地道的顾客举报,并对作业作出了孝敬,我们自家也认为特别有价值,获得了特大的引以骄傲。选取新型迎适那时候候代时尚的本领自然进步服务的成色,也使得这种知识在小卖部在生根。在这里,对不久导入Isomorphic JavaScript,并向东瀛国内推广的同事 @ahomu 表示多谢! 

HTML缓存

博客小说是静态文书档案,对于特定U大切诺基L的央求会回来固定的内容,由此特别符合实行缓存。缓存使得服务器管理内容收缩,在增进页面响应速度的还要缓慢解决了服务器的承负。大家将不改变的内容(随笔等卡塔尔生成的HTML举办缓存重返,对于由于变化的从头到尾的经过能过JavaScript、CSS等张开操作(比方显示、隐敝等卡塔 尔(英语:State of Qatar)。

 图片 15

z-newrelic-entrylist.png

那张图显示了二零一六年3月最终七日New relic上的总计数据。随笔列表页面包车型地铁HTML的响合时间基本在50ms以下。

 图片 16

z-newrelic-entry.png

那张图是文章详细页面包车型大巴总结数据。能够见到,那么些页面包车型客车响合时间也差不离是在50ms以下。由于存在小说过长的时候会促成页面体量变大,以至小说页面不能够一心缓存等景况,所以对待列表页面会设有越来越多异常的慢的响应。

对此因央求的顾客端而发出变化部分的拍卖,我们在HTML的body标签中经过参预相应的class,然后在客户端通过JavaScript和CSS等张开操作。比方,一些剧情不想在一些操作系统上显得,大家就用CSS对这个内容开展掩盖。由于CSS样式表会先载入,页面布局明确下来之后再扩充页面渲染,所以那些也能够消除前边要提到的「咯噔」难点。

<!-- html --> <body class="OsAndroid">

1
2
3
<!-- html -->
 
<body class="OsAndroid">

CSS

/* main.css */ body.OsAndroid .BannerForIos { dsplay: none; }

1
2
3
4
5
/* main.css */
 
body.OsAndroid .BannerForIos {
  dsplay: none;
}

提高界面设计、客户体验(二零一五年版Ameblo卡塔 尔(英语:State of Qatar)

系统重构的导火线

二零零四年起,Ameblo成为了日本本国最大面积的博客服务。但是随着系统规模的抓好,以致众多巢倾卵破人士不停加码种种模块、页面指点链接等,最后使得页面表现缓慢、对网页浏览量(PV)变成了极其严重的影响。而且页面表现速度方面,绝大大多是前面多少个的难点,并不是是后端的难题。

基于以上这一个难题,我们决定以拉长页面表现速度为第风流浪漫对象,对系统进行通透到底重构。与此同有的时候候后端系统也在举行重构,将昔日的数目部分进行API化改变。那时就是叁个将All-in-one的重型Java应用举行适宜分割的绝佳良机。

目标

此番系统重构确立了以下多少个对象。

可访谈性

此次系统重构正值可访问性成为火爆话题的时候。留心的为HTML扩大一定标签属生就可以使任何类别丰硕可访谈。首先在HTML标签属性加多上时要用心商讨。对于标题、 img 等丰硕适当的 alt 属性,对于可点击的成分必需求接受 a button 等可点击的竹签。假诺能半自动对可访谈性实行核查就再好然则了,ESlint的 jsx-a11y 插件能够帮助成功那或多或少。

在类型举办的时候,正巧集团内开展了叁回可访谈性的上学活动( Designing Web Accessibility 的小编太田先生和伊原来的文章化人也列席了此番活动卡塔尔国,在本次活动上也尝试了Ameblo到近来截止未有专一过的语音朗读器。那个时候用语音朗读器在Ameblo上进行朗读时,有几处有标题标地点,使用 WAI-ARIA 对这几处加以更正(与 data-* 相同,JSX也支持 aria-* 属性)。

这里 的PPT中有详实的牵线,招待观察(德语卡塔 尔(阿拉伯语:قطر‎。

本文由金沙澳门官网发布于前端知识,转载请注明出处:Redux打造的同构Web应用,轻松管理状态

关键词: 金沙澳门官网