Hire the Top 3% of Freelance React.js Developers

Intro

客户端应用程序开发的另一波发展浪潮即将到来. It involves ES6, JavaScript的新版本, universal applications, functional programming, 服务器端渲染和webpack, 就像一个带着喷气背包的任务执行者.

此外，React现在非常热门. It is a concise and excellent framework to build performant components. 因为我们已经有了这些, 你怎样才能找到缺失的那一块——能够接受它并为你构建最先进软件的工程师?

React Plainly

First things first. 在React仅仅作为一个视图库进行营销的背景下, and as client-side applications consist of more than just views, React不会是你的候选人会使用的唯一工具. 不过，这是一个至关重要的问题. 以下是一些筛选问题.

问:React中的高阶组件是什么?

一般来说，高阶组件是一个包装器. 它是一个以组件为参数并返回一个新组件的函数. 它可用于扩展或修改所包含组件的行为(包括呈现的输出). 在不修改React中的底层类的情况下改变行为的组件的使用很好地体现在装饰器模式中.

The higher-order components are a way to build components using composition. 一个示例用例是抽象出代码片段, 对于多个组件来说是通用的:

Player.js

从React中导入React， {Component, PropTypes};

导出默认类Player扩展组件{
  static propTypes = {
    black: PropTypes.bool,
    data: PropTypes.object,
    styles: PropTypes.object
  };

  static defaultProps = {
    black: false,
    data: {
      src: null,
      caption: ''
    },
    styles: {}
  };

  render() {
    Const{黑色，数据，样式}=这个.props.data;
    return (
      

        

          
      
    );
  }
}

考虑这个组件，它包含一个 Player but also contains module markup. 该标记可以被其他组件重用. Let’s abstract it, and also allow for passthrough of properties:

Player.js

从React中导入React， {Component, PropTypes};
导入模块容器./ModuleContainer';

导出类PlayerInline扩展组件{
  static propTypes = {
    data: PropTypes.object
  };

  static defaultProps = {
    data: {
      src: null,
      caption: ''
    }
  };

  render() {
    Const {src，标题}=这个.props.data;
    return (
      

        
    );
  }
}

const Player = new ModuleContainer(Player);
export default Player;

ModuleContainer.js

从React中导入React， {Component, PropTypes};

Module container (Module) {
  返回类扩展组件{
    static propTypes = {
      black: PropTypes.bool,
      styles: PropTypes.object
    };

    render() {
      Const{黑色，样式}=这个.Props // eslint-disable-lint
      return (
        

          
        
      );
    }
  };
}

现在我们仍然可以使用前面的实例化方式 Player, no changes here. 如果我们愿意，我们也可以使用内联播放器. Then the module wrapper markup and props can be used with other modules:

高阶组件是对ES6中React不再使用混合的设计决策的直接回应, 哪一个是在2015年初完成的. In fact, 高阶组件使结构更清晰, 而且它们更容易维护，因为它们是分层的, whereas mix-ins have a bigger chance of conflicting due to a flat structure.

想了解更多，请点击 另一个高阶组件的用例，重点是消息传递道具. Also check the introduction to the preference of higher-order components over mixins, 由丹·阿布拉莫夫概述, the author of Redux, and an interesting example of advanced composition using refs by Ben Nadel.

问:应该依赖哪些组件 state, and why?

考虑到关注点的分离，将表示与逻辑分离似乎是明智的. 在React的世界里，一切都是组件. 但是，用于呈现数据的组件不应该必须从API获取数据. 惯例是要有 presentational (哑)组件无状态，和 container 依赖于状态的组件.

也就是说，惯例并不严格. React中也有不止一种状态类型. 尽管众说纷纭, 在表示组件，特别是交互式组件中使用局部状态似乎并不是一个坏的做法.

另一个区别是组件类和无状态函数组件之间的区别. 显然，后者没有状态. 说到无状态函数组件, 官方建议尽可能使用它们.

Q: What is JSX? 它是如何工作的，为什么要使用它?

JSX是React JavaScript的语法糖, which makes it easy to write components because it has XML-like syntax. 然而，JSX是JavaScript而不是HTML, React将JSX语法转换为纯JavaScript.

乍一看，它看起来很笨拙，尽管许多熟练的开发人员现在已经习惯了. 使用它的主要原因是简单. 定义即使是稍微复杂的结构，最终也会呈现为HTML，这可能是令人生畏和重复的:

React.createElement('ul'， {className: 'my-list'}， 
  React.createElement('li'， {className: 'list-element'}， 
    React.createElement('a', { className: 'list-anchor', href: 'http://google.com' }, 'Toptal.com'),
    React.createElement('span', { className: 'list-text' }, ' Welcome to the network')
  ),
  React.createElement('li'， {className: 'list-element'}， 
    React.createElement('div'， {className: 'list-item-content'}， 
      React.createElement(someecustomelement， {data: elementData})
    )
  )
);

Versus:

  

    Toptal.com
     Welcome to the network
  
  

    

      
    
  

Consider more complex elements navigation components, with multiple nestings. 简洁是大多数框架都有模板引擎的原因之一，而React有JSX.

To learn more, check influential discussion on JSX in the context of container components.

前端开发的新方法

ES6 (ECMA Script 2015)， JavaScript的新版本，已经发布了一段时间. 开源社区中的大多数React材料都使用ES6，有时甚至是ES7. 新版本增加了JavaScript的表现力，并修复了该语言的一些问题. 目前的标准程序是使用 Babel，用于将ES6编译为ES5. 它允许我们用ES6编写代码, and let it execute correctly on the majority of current browsers as ES5. 因此，你要雇佣的开发人员精通ES6是至关重要的.

问:ES6的函数有哪些新特性?

实际上有一些. 最突出的是箭头函数表达式, which is a concise way of writing anonymous function expressions:

var counterArrow = counter => counter++;
// equivalent to function (counter) { return counter++; }

这是一个显著的区别. 用箭头函数 this 对象捕获封闭作用域的值. 所以没有必要再写了 var that = this.

Another difference is in the way arguments can be defined or passed in. ES6带来了默认参数和rest参数. 当调用中没有提供参数的默认值时，默认参数是一种非常有用的设置参数默认值的方法. The rest parameters, 它们的语法与展开运算符相似, 允许以优雅的方式处理传递给函数的不确定数量的参数.

var businessLogic = (product, price = 1， ...rest) => {
  product.price = price;
  product.details = rest.map(detail => detail);
};

问:ES6和React中有哪些类?

ES6类提供了创建对象的方法，实际上仍然依赖于原型继承. 它们大多是语法上的糖，但非常方便. 但是，React类不需要它们.

React类是组件. 它们可以用三种方式定义:使用 React.createClass() 方法，使用ES6类，或者使用函数来创建无状态函数组件:

const Counter1 = React.createClass({
  propTypes: {
    count: PropTypes.number
  }

  defaultProps: {
    count: 0
  }

  render: function() {
    return Count: {this.props.count};
  }
});

类Counter2扩展组件{
  static propTypes = {
    count: PropTypes.number
  }

  static defaultProps = {
    count: 0
  }

  render() {
    return Count: {this.props.count};
  }
}

Counter3(props) {
  return Count: {props.count};
}

Counter3.propTypes = {
  count: PropTypes.number
};

Counter3.defaultProps = {
  count: 0
};

如前所述，建议尽可能使用无状态功能组件. However, those components are not yet optimised for performance. 考虑以下GitHub问题在Redux和 React to learn more.

问:什么是本地样式，或者内联样式，web开发中样式的新趋势?

This one is pretty rad. 到目前为止，声明式CSS总是共享一个全局作用域. 要向可重用组件添加样式，开发人员必须仔细选择名称空间. Another thing, 有时使用CSS是很困难的, 因为有些风格需要计算, 所以单一的风格成为了一个例外. Of course, there is calc()，但这并不总是足够的.

Local styles，有时也被称为 inline styles，解决这两个问题. 现在可以将样式表绑定到组件，并且知道它们相对于其作用域保持本地. 这些样式不会影响其作用域之外的元素. If that was not enough, the styles become readily available in JavaScript.

AlertWidget.scss

.alertWidget {
  font-variant: italics;
  border: 1px solid red;
  padding: 13px;
}

.alert {
  font-weight: 700;
  color: red;
}

AlertWidget.js

import React， {PropTypes} from ' React ';

AlertWidget(props) {
  Const styles = require('./AlertWidget.scss');
  return (
    

      

        
{props.alert}
        
{props.text}
      
    
  );
}

AlertWidget.propTypes = {
  alert: PropTypes.text,
  text: PropTypes.text
};

导出默认AlertWidget;

并非所有的样式都必须是本地的，但它确实是一个非常强大的工具. To learn more, check 对当地风格有影响的介绍 and 在css技巧上讨论内联样式的优缺点

How Do You State

包含多个组件的应用程序, 特别是大型应用程序, 仅使用局部组件状态是否难以维护. 在React中添加控制器风格以外的逻辑也是一种不好的做法. 但是不用担心，已经有解决方案了.

Q: What is the application state in React, and what governs the state?

答案很简单——它是一个对象，它表示应用程序的当前数据集和其他属性. 应用程序状态与组件本地状态的不同之处在于，它可以被多个组件引用.

另一个区别是不应该直接更改应用程序状态. 唯一可以更新它的地方是商店. 存储控制应用程序状态, 还定义可以被分派的动作, 比如用户交互的结果.

大多数React组件不应该依赖于应用范围. 表示组件应该能够访问数据片段, 但是这些数据应该通过属性提供给他们. In React, 惯例是只有容器元素调度操作并引用应用程序范围.

Q: So, what tools for governing the state in React are out there?

在用React构建的应用程序中处理应用程序状态通常是在React之外完成的. Facebook, who brought us React, also introduced the Flux architecture and just enough of its implementation. 客户端应用程序的Flux部分是前端业务逻辑发生的地方.

React和Flux没有紧密耦合. Flux的实现也不止一个. 事实上，有很多，还有其他受Flux启发的非常受欢迎的. The most popular Flux implementations are Facebook Flux, Reflux and Alt.js. 还有基于Flux原理的Redux，很多人认为它是在Flux的基础上改进的.

这些库都可以完成工作. 然而，开发者必须做出选择，而且必须有意识地做出选择. 做出选择的一些合理标准:

• 这个存储库有多流行? 查找GitHub星星和分叉数.
• 框架是否得到维护?? 检查在过去两周内完成了多少提交. Also, read the author’s notes and the open and closed issue counts.
• 文档的状态是什么? 这一点尤其重要, 团队成员可以增加或更改，但软件的代码库需要清晰.
• 开发人员对特定框架的了解程度如何?

在撰写本文时，Redux是迄今为止最流行的一种. Flux的作者也对它进行了审查，他们认为这是一项出色的工作. 文档是优秀的，有30个免费的短视频教程课程的作者. 框架本身非常简单，并且最符合函数式编程范式.

Alt.Js也有一个充满活力的社区, 在许多文章中受到高度赞扬, 并且有很好的文档. Alt.js也是一个纯Flux实现. Several other implementations were dropped in favour of the two mentioned.

这是Redux的作者Dan Abramov写的一篇关于Flux不同实现的文章

问:什么是单向数据流? 它带来了什么好处?

单向数据流构成了对应用程序状态的所有更改都以相同的通用方式完成. 这个流程在Flux实现和Redux中遵循类似的模式. 模式从一个动作开始, 哪个由存储分派和处理，并具有更新状态的效果, 这反过来会导致更新的视图.

通过遵循这种模式, 使用Flux或Redux管理其状态的应用程序是可预测和规范化的. 每个状态版本都是调用一组操作的结果. 这意味着现在可以更容易地通过监视哪些操作被调度来重现每个用户体验. 下面是一个有用的例子 article about logging and replaying user actions with Flux on Auth0.

它在调试时也非常有用. In fact, 受Flux启发的最流行的框架之一, Redux, 是创建一套依赖于Flux概念的新开发工具的副作用吗. 有一个演讲，叫做 丹·阿布拉莫夫(Dan Abramov)的《欧博体育app下载》(Hot Reloading with Time Travel).

Miscellaneous

编程有很多方法，软件工程也有很多方法. 编程范例的差异远远超出了风格. Recently, there are many mentions of functional programming in JavaScript. There are many advantages awaiting for the developers who seek to embrace it.

问:解释函数式编程范式.

函数式编程是一种范式，它强调:

• Writing pure functions.
• 没有一个全球性的状态.
• Not mutating data.
• 与高阶函数的复合.

纯函数不会产生副作用, 它们也是幂等的, meaning they always return the same value when given the same arguments.

Programs which rely on functional programming have two major advantages. 它们很容易理解，也很容易测试. In contrast, 将变量赋值到全局作用域, relying on events, and mutating data makes it very easy for the application to become chaotic. 从JavaScript开发人员的角度来看, 我甚至会说，这很容易导致代码难以理解，容易出错.

JavaScript并不是严格意义上的函数式语言. However, 具有一等公民的功能, 这意味着它们可以像其他类型一样被分配和传递，并且是可组合的, 对于JavaScript开发人员来说，采用函数式编程当然是可能的.

最近有许多文章赞扬这种风格. 然而，似乎最重要的是新工具，它们变得非常流行. 这些工具在不同程度上结合了关键的函数式编程思想, and include Redux, React的最新更新, 还有像培根这样的人.js.

问:如何在React中倾向于函数式编程?

首先，编写React代码主要集中在编写好的JavaScript代码上. 用JavaScript编写函数式编程的一般方法是保持一致的编程风格, focused on:

• Writing pure functions.
• 保持函数小.
• 总是返回一个值.
• 组合函数(利用高阶函数).
• Never mutating data.
• 不会产生副作用.

JavaScript中有许多适合函数式编程的工具，其中包括: .map(), .reduce(), .filter(), .concat. There are also new ES6 features available, like native promises or the …spread operator.

此外，还有一些可用的线索，比如 eslint in particular, combined with linter configurations based on the Airbnb JavaScript and React style guides. 还有其他的工具，比如 immutable.js and code patterns like deepFreeze function，这有助于防止数据突变，这在测试中特别有价值.

React version 0.14引入了无状态功能组件, 从面向对象的编程向函数式编程迈进了哪一步. 这些组件是最小的，应该尽可能使用. 通常，React应用程序中的绝大多数组件都应该是表示的.

Using Redux is yet another step in functional programming direction. Redux使用函数调用，不像Flux依赖于事件. 所有Redux reducer都是纯函数. Redux从不改变应用程序状态. 相反，reducer总是返回一个新状态.

问:如何测试React应用程序?

最后但并非最不重要的是开发人员的测试方法. 回归问题是挫败感的最终来源. 除了允许开发人员和客户确保应用程序按预期工作之外, 测试是对回归问题的补救措施.

构建持续集成或部署环境，在其中自动测试每个推送的提交, 如果成功部署, 已经成为标准了吗. 它非常容易设置，许多SaaS都提供免费计划. Codeship 例如，它具有良好的集成和免费计划. 另一个很好的例子是 Travis CI 哪一种提供了更稳定和成熟的感觉，并且对开源项目是免费的.

还必须有实际的测试要运行. 通常使用一些框架编写测试. Facebook为React提供了一个测试框架, it is called Jest, 并以流行的茉莉花为原型. 另一个更灵活的行业标准是Mocha, 通常与测试员Karma结合在一起.

React提供了另一个超级特性，testtils. 它们提供了一套完整的工具，专门用于测试组件. 它们创建一个抽象，而不是将组件插入到实际的页面中, 哪一个允许使用单元测试编译和测试组件.

To get more insight into 测试React应用程序, you can read on our blog. 我也推荐大家在 egghead.io, 那里有一些关于React的系列, 还有Flux和Redux, 甚至是一个专注于 测试React应用程序.

Conclusion

React为客户端应用程序带来了高性能，并使使用它的项目处于良好的位置. 图书馆被广泛使用，并有一个充满活力的社区. 大多数情况下，转向React还需要包含其他工具来交付完整的应用程序. 有时，它可能需要更全面的技术升级.

众所周知，Web开发和移动应用开发(Android和iOS)的发展速度非常快. New tools gain popularity, become valuable and ready to use within months. 这些创新不仅仅包括工具, 并且常常跨到代码风格, 应用程序结构和系统架构. 前端开发人员需要构建可靠的软件并优化流程. The best are open-minded, and state sound arguments with confidence. Toptal engineers 还能领导敏捷开发团队吗, projects, 开发过程, 并为产品的效益引进新技术.