xml地图|网站地图|网站标签 [设为首页] [加入收藏]
别责怪框架,性能优化大挑战
分类:web前端

React 性能优化大挑战:一次理解 Immutable data 跟 shouldComponentUpdate

2018/01/08 · JavaScript · ReactJS

原文出处: TechBridge Weekly/huli   

前阵子正在重构公司的专案,试了一些东西之后发现自己对于 React 的渲染机制其实不太了解,不太知道 render 什麽时候会被触发。而后来我发现不只我这样,其实还有满多人对这整个机制不太熟悉,因此决定写这篇来分享自己的心得。其实不知道怎麽优化倒还好,更惨的事情是你自以为在优化,其实却在拖慢效能,而根本的原因就是对 React 的整个机制还不够熟。被「优化」过的 component 反而还变慢了!这个就严重了。因此,这篇文章会涵盖到下面几个主题:

  1. Component 跟 PureComponent 的差异
  2. shouldComponentUpdate 的作用
  3. React 的渲染机制
  4. 为什麽要用 Immutable data structures

为了判别你到底对以上这些理解多少,我们马上进行几个小测验!有些有陷阱,请睁大眼睛看清楚啦!

别责怪框架:我使用 AngularJS 和 ReactJS 的经验

2016/05/28 · JavaScript · 3 评论 · AngularJS, ReactJS

本文由 伯乐在线 - 十年踪迹 翻译。未经许可,禁止转载!
英文出处:Bernardo Smaniotto。欢迎加入翻译组。

在过去的几年里,网站进化成了复杂的网页应用。曾经的互联网只涉及到简单的商业信息展现,而如今,看看 Facebook、Slack、Spotify 以及 Netflix,互联网正在改变你的社交和生活方式。随着互联网的发展,前端开发这个行业达到了全新的高度,并得到了前所未有的重视。

就像大多数前端开发者那样,我们的技术栈曾经由 HTML 和 jQuery 构成。我们使用 AJAX 请求从后端获取数据,使用 JavaScript 渲染新的 UI 元素然后将它插入到 DOM 中去,用户交互通过事件绑定和回调函数来实现。不要误解我,我不反对上面那种方式,它们今天依然适合于大多数 Web 应用。

然而,当一个应用的复杂度大幅度增加,一堆问题开始出现得比预期的更频繁:你可能数据更新了,但漏掉了更新某一处展现,你通过 Ajax 获取和更新了内容,但没有绑定事件,还有另外一些问题,把这些全部列出来会是个很长的清单。这些问题让你的代码逐渐变得不可维护,尤其是在多人协作团队开发的项目中。这时候,你就需要使用前端框架来为你解决多人协作开发的种种问题了。

澳门新葡亰手机版 1

CSS 布局经典问题初步整理

2017/05/27 · CSS · 1 评论 · 布局

原文出处: brianway   

本文主要对 CSS 布局中常见的经典问题进行简单说明,并提供相关解决方案的参考链接,涉及到三栏式布局,负 margin,清除浮动,居中布局,响应式设计,Flexbox 布局,等等。

React 小测验

1. React 福音

当我们的团队开始寻找一个合适的前端框架的时候,我们考虑了许多选择,最后留下两个选项 —— Angular 和 React。

Angular 是目前为止最成熟的方案:它拥有一个庞大的社区,你可以为大部分应用场景找到合适的第三方模块。

React 也很有竞争力,它以 JavaScript 为中心的设计看起来很有前途,而且它性能很好。虽然它还是 Beta 版本,但是 “由Facebook团队开发的” 这一点给它的竞争力加分。

我们决定给 React 一个机会,选择了使用它。

最初使用 React 让人感觉棒极了,我们可以用 JavaScript 来做一切:展现一段 HTML,通过遍历数组渲染一个列表,优雅地改变一个变量的值,然后看着它通过 props 传播到各处,更新要更新的内容到可复用组件里,然后一切就绪了,没有一坨一坨的代码,只有真正的停下来思考澳门新葡亰手机版,。React 解决了我们在团队开发中编写可维护代码的诉求。

澳门新葡亰手机版 2

CSS 基础知识

下面几个入门教程不错:

  • 幕课网 – HTML+CSS基础课程:偏基础,可以在线练习和预览
  • MDN – CSS入门教程: MDN 的官方文档
  • 学习 CSS 布局:排版和配色特别舒服,简短但不深入,适合概览入门

第一题

以下程式码是个很简单的网页,就一个按钮跟一个叫做Content的元件而已,而按钮按下去之后会改变App这个 component 的 state。

JavaScript

class Content extends React.Component { render () { console.log('render content!'); return <div>Content</div> } } class App extends React.Component { handleClick = () => { this.setState({ a: 1 }) } render() { console.log('render App!'); return ( <div> <button onClick={this.handleClick}>setState</button> <Content /> </div> ); } } ReactDOM.render( <App />, document.getElementById('container') );

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
class Content extends React.Component {
  render () {
    console.log('render content!');
    return <div>Content</div>
  }
}
  
class App extends React.Component {
  handleClick = () => {
    this.setState({
      a: 1
    })
  }
  render() {
    console.log('render App!');
    return (
      <div>
        <button onClick={this.handleClick}>setState</button>
        <Content />
      </div>
    );
  }
}
  
ReactDOM.render(
  <App />,
  document.getElementById('container')
);

请问:当你按下按钮之后,console 会输出什麽?

A. 什麽都没有(App 跟 Content 的 render function 都没被执行到)
B. 只有 render App!(只有 App 的 render function 被执行到)
C. render App! 以及 render content!(两者的 render function 都被执行到)

2. React + Flux = ♥

但沿着这条路走下去,我们发现并不是一切都很美好。我们遇到的第一个大挑战就曾让我们考虑是否应该放弃 React —— 我们陷入了回调迷宫。

由于 React 的单向数据流性质,如果子组件需要更新父组件的状态,父组件就要传一个回调函数给它。这咋看起来没有什么大不了的,然而如果你的组件要更新 root 组件的状态,你就不得不将 “this.props.updateCallback” 沿着数据流一层一层传递下来。

尽管如此,我们喜欢 React,继续使用它完成我们的工作。通过努力,我们找到了 Flux,它是一种规范化单向数据流的架构思想。它由四个主要元素构成。

  • Store: 负责存储数据和应用状态。
  • Action: 触发状态改变。
  • Dispatcher: 管理 action 并将它们导向对应的 store。
  • View: 展现 store 中的数据,派发 action – 这块是 React 中已有的。

采用 Flux,我们就不用将状态保存在 root 组件中,然后将 update 回调一层层传递给它的子组件。React 组件通过 store 直接获得数据,通过调用 action 来改变状态:这样简单、优雅,不会让你抓狂。Flux 补充了可预测的行为和一些标准到被 React 框架约束的代码中。

CSS 定位问题

主要就是经典的绝对定位,相对定位问题。

  • 10个文档学布局:通过十个例子讲解布局,主要涉及相对布局,绝对布局,浮动。
  • 百度前端学院笔记 – 理解绝对定位:文章本身一般,几篇参考文献比较详细
  • HTML和CSS高级指南之二——定位详解(译文):介绍浮动的使用,详细介绍定位的技巧,包括如何准确的给元素在 X 轴、Y 轴和 Z 轴定位

第二题

以下程式码也很简单,分成三个元件:App、Table 跟 Row,由 App 传递 list 给 Table,Table 再用 map 把每一个 Row 都渲染出来。

JavaScript

class Row extends Component { render () { const {item, style} = this.props; return ( <tr style={style}> <td>{item.id}</td> </tr> ) } } class Table extends Component { render() { const {list} = this.props; const itemStyle = { color: 'red' } return ( <table> {list.map(item => <Row key={item.id} item={item} style={itemStyle} />)} </table> ) } } class App extends Component { state = { list: Array(10000).fill(0).map((val, index) => ({id: index})) } handleClick = () => { this.setState({ otherState: 1 }) } render() { const {list} = this.state; return ( <div> <button onClick={this.handleClick}>change state!</button> <Table list={list} /> </div> ); } }

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
41
42
43
44
45
46
class Row extends Component {
  render () {
    const {item, style} = this.props;
    return (
      <tr style={style}>
        <td>{item.id}</td>
      </tr>
    )
  }
}
  
class Table extends Component {
  render() {
    const {list} = this.props;
    const itemStyle = {
      color: 'red'
    }
    return (
      <table>
          {list.map(item => <Row key={item.id} item={item} style={itemStyle} />)}
      </table>
    )
  }
}
  
class App extends Component {
  state = {
    list: Array(10000).fill(0).map((val, index) => ({id: index}))
  }
  
  handleClick = () => {
    this.setState({
      otherState: 1
    })
  }
  
  render() {
    const {list} = this.state;
    return (
      <div>
        <button onClick={this.handleClick}>change state!</button>
        <Table list={list} />
      </div>
    );
  }
}

而这段程式码的问题就在于按下按钮之后,App的 render function 被触发,然后Table的 render function 也被触发,所以重新渲染了一次整个列表。

可是呢,我们点击按钮之后,list根本没变,其实是不需要重新渲染的,所以聪明的小明把 Table 从 Component 变成 PureComponent,只要 state 跟 props 没变就不会重新渲染,变成下面这样:

JavaScript

class Table extends PureComponent { render() { const {list} = this.props; const itemStyle = { color: 'red' } return ( <table> {list.map(item => <Row key={item.id} item={item} style={itemStyle} />)} </table> ) } } // 不知道什麽是 PureComponent 的朋友,可以想成他自己帮你加了下面的 function shouldComponentUpdate (nextProps, nextState) { return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState) }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Table extends PureComponent {
  render() {
    const {list} = this.props;
    const itemStyle = {
      color: 'red'
    }
    return (
      <table>
          {list.map(item => <Row key={item.id} item={item} style={itemStyle} />)}
      </table>
    )
  }
}
  
// 不知道什麽是 PureComponent 的朋友,可以想成他自己帮你加了下面的 function
shouldComponentUpdate (nextProps, nextState) {
  return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState)
}

把 Table 从 Component 换成 PureComponent 之后,如果我们再做一次同样的操作,也就是按下change state按钮改变 App 的 state,这时候会提升效率吗?

A. 会,在这情况下 PureComponent 会比 Component 有效率
B. 不会,两者差不多
C. 不会,在这情况下 Component 会比 PureComponent 有效率

3. 狂野的 Angular 出场……

……它采用以 HTML 为中心的代码且并不超有效。

澳门新葡亰手机版 3

最近,我开始参与一个 Angular 项目。我加入的时候这个项目已经完成了很大一部分了,所以不得不用 Angular,没有回头路。作为一个忠实的 React 开发者,我吐槽 Angular。当我开始写第一行 Angular 代码的时候,我就真心诅咒它。这就是所谓的:如果你爱 React,那你就恨 Angular。

我不能自欺欺人,在一开始,我写 Angular 代码一点也不开心。将框架定义的属性(或者,更恰当地说法是 directives)写入到 HTML 中的做法让我感觉很不爽。我得费很大劲才能实现很简单的功能,比如改变 URL 的时候不重新加载 controller 或者渲染基础模板。

当我在表单中遇到一个由于 ngIf directive 创建一个新的子域而导致的问题时,我处理起来还是很费劲。还有当我想要从一个准备发送给服务器的 JSON 中移除一些空白字段时,我发现 UI 中对应的数据也被一并移除了 —— 丫的双向绑定 ╮(╯▽╰)╭。还有当我想要使用 ngShowngHide 来显示一个 HTML 块同时隐藏另一个 HTML 块时,在一瞬间,两者同时显示了。我明白许多问题是我自己的问题,而我想要指出的是,Angular是不可预测的,使用它的时候会遇上各种各样的坑。

澳门新葡亰手机版 4

当然,Angular 还是善于处理很多事情的。内建的 HTTP 请求模块 非常棒,对 promise 的支持也很好。另一个我无法吐槽的好东西是:内建的表单控制器,它为 input 字段提供了默认的格式化、解析和校验,而且还提供了一个很好的插件用来展示错误信息。

使用 Angular 也能让开发团队与页面制作团队协同工作变得更简单。在我们团队,有专门的页面重构工程师负责写 HTML 和 CSS,Angular 能让我们的工作无缝对接:重构工程师负责 HTML 和一些额外的标签,我负责处理逻辑。如果我们使用的是 React,那么至少让重构工程师写组件会是一个挑战,要么得让他学会写基本的 JSX,要么我就只能自己将他写的 HTML 复制粘贴到 JSX 中。

还记得前面提到的 URL 替换和模板渲染问题吗?其实没关系,人们通常使用第三方的路由库(ui-router)它们比标准的 (ngRoute)要好用。最后,Angular 也没有我之前认为的那样糟糕。之前的大多数抱怨要么是因为我习惯了 React 思维,要么是我还不够专业。

澳门新葡亰手机版 5

三栏式布局

涉及浮动和清除浮动,主要讲解“圣杯”和“双飞翼”两种解决方法。这两种方法实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,它们实现的效果是一样的,差别在于其实现的思想。

第三题

接著让我来看一个跟上一题很像的例子,只是这次换成按按钮以后会改变 list:

JavaScript

class Row extends Component { render () { const {item, style} = this.props; return ( <tr style={style}> <td>{item.id}</td> </tr> ) } } class Table extends PureComponent { render() { const {list} = this.props; const itemStyle = { color: 'red' } return ( <table> {list.map(item => <Row key={item.id} item={item} style={itemStyle} />)} </table> ) } } class App extends Component { state = { list: Array(10000).fill(0).map((val, index) => ({id: index})) } handleClick = () => { this.setState({ list: [...this.state.list, 1234567] // 增加一个元素 }) } render() { const {list} = this.state; return ( <div> <button onClick={this.handleClick}>change state!</button> <Table list={list} /> </div> ); } }

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
41
42
43
44
45
46
class Row extends Component {
  render () {
    const {item, style} = this.props;
    return (
      <tr style={style}>
        <td>{item.id}</td>
      </tr>
    )
  }
}
  
class Table extends PureComponent {
  render() {
    const {list} = this.props;
    const itemStyle = {
      color: 'red'
    }
    return (
      <table>
          {list.map(item => <Row key={item.id} item={item} style={itemStyle} />)}
      </table>
    )
  }
}
  
class App extends Component {
  state = {
    list: Array(10000).fill(0).map((val, index) => ({id: index}))
  }
  
  handleClick = () => {
    this.setState({
      list: [...this.state.list, 1234567] // 增加一个元素
    })
  }
  
  render() {
    const {list} = this.state;
    return (
      <div>
        <button onClick={this.handleClick}>change state!</button>
        <Table list={list} />
      </div>
    );
  }
}

这时候 Table 的 PureComponent 优化已经没有用了,因为 list 已经变了,所以会触发 render function。要继续优化的话,比较常用的手段是把 Row 变成 PureComponent,这样就可以确保相同的 Row 不会再次渲染。

JavaScript

class Row extends PureComponent { render () { const {item, style} = this.props; return ( <tr style={style}> <td>{item.id}</td> </tr> ) } } class Table extends PureComponent { render() { const {list} = this.props; const itemStyle = { color: 'red' } return ( <table> {list.map(item => <Row key={item.id} item={item} style={itemStyle} />)} </table> ) } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class Row extends PureComponent {
  render () {
    const {item, style} = this.props;
    return (
      <tr style={style}>
        <td>{item.id}</td>
      </tr>
    )
  }
}
  
class Table extends PureComponent {
  render() {
    const {list} = this.props;
    const itemStyle = {
      color: 'red'
    }
    return (
      <table>
          {list.map(item => <Row key={item.id} item={item} style={itemStyle} />)}
      </table>
    )
  }
}

请问:把 Row 从 Component 换成 PureComponent 之后,如果我们再做一次同样的操作,也就是按下change state按钮改变 list,这时候会提升效率吗?

A. 会,在这情况下 PureComponent 会比 Component 有效率
B. 不会,两者差不多
C. 不会,在这情况下 Component 会比 PureComponent 有效率

4. 总结: AngularJS 与 ReactJS

React 使用原生 JavaScript 函数让开发者可以创建一个有固定生命周期的、单向数据流的可复用组件。React 与 Flux 架构(或者受 Flux 启发而产生的其他架构,比如 Redux)相结合,能让团队长期维护一个项目变得更加容易,使用它不用担心解决一个 bug 会引入更多新 bug。但是,如果你的团队有专门写 HTML 和 CSS 的人,React 会带来额外的学习成本,因为它改变了传统的开发流程。而且 React 的效果还非常依赖你选择的组成你的应用的模块。

另一方面,Angular 专注于设计简单的双向数据绑定,当你改变 controller scope 中的内容,变化将会被自动地同步到UI(效果如同魔法般)。它自认为节省了配置的时间,开发者不用像传统开发模式那样考虑用各种设计模式组织代码然后从上百种可选的方案中选出一个核心模块。使用双向绑定为开发带来了便利,然而它也容易在长期维护的过程中由于修改部分代码而产生不可预期的 bug,尤其是那些在过去的几个月中没有再动过的代码。

那么,我从头开始创建 app 的首选方案是什么呢?

从长远而言,我个人倾向于选择 React,使用 Redux 架构,使用 Axios 支持 promise-ready 的 HTTP 请求,以及使用 react-router 处理路由。不过,这也取决于团队的经验:如果有专门写 HTML 和 CSS 的人,我肯定会选择 Angular。两个框架都各有利弊,从构建可维护项目的目的来考虑,最关键的还是如何让小伙伴们写出好代码。

澳门新葡亰手机版 6

打赏支持我翻译更多好文章,谢谢!

打赏译者

圣杯布局

圣杯:父盒子包含三个子盒子(左,中,右)

  • 中间盒子的宽度设置为 width: 100%; 独占一行;
  • 使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行;
    • .left {margin-left:-100%;} 把左边的盒子拉上去
    • .right {margin-left:-右边盒子宽度px;} 把右边的盒子拉上去
  • 父盒子设置左右的 padding 来为左右盒子留位置;
  • 对左右盒子使用相对布局来占据 padding 的空白,避免中间盒子的内容被左右盒子覆盖;

XHTML

<!-- 圣杯的 HTML 结构 --> <div class="container"> <!-- 中间的 div 必须写在最前面 --> <div class="middle">中间弹性区</div> <div class="left">左边栏</div> <div class="right">右边栏</div> </div>

1
2
3
4
5
6
7
<!-- 圣杯的 HTML 结构 -->
<div class="container">
    <!-- 中间的 div 必须写在最前面 -->
    <div class="middle">中间弹性区</div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
</div>

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:别责怪框架,性能优化大挑战

上一篇:Grid中的陷阱和绊脚石,之调试大法 下一篇:没有了
猜你喜欢
热门排行
精彩图文