函数组合的优势

因为函数组合是让 React 非常强大的重要原因之一，因此我们将深入了解这一概念。注意，函数组合就是将简单的函数组合到一起，并形成复杂的函数。有几个重要概念值得注意，包括：

• 简单的函数
• 组合到一起形成另一个函数

函数组合由简单的函数构成。我们看一个示例：

function getProfileLink (username) {

  return 'https://github.com/' + username

}

这个函数极为简单，对吧？只有一行！类似地，getProfilePic 函数也只有一行：

function getProfilePic (username) {

  return 'https://github.com/' + username + '.png?size=200'

}

这些函数绝对是简单的函数，要组合它们，我们将它们放进另一个函数中：

function getProfileData (username) {

  return {

    pic: getProfilePic(username),

    link: getProfileLink(username)

  }

}

我们可以不用组合形成 getProfileData，而是直接向其提供数据：

function getProfileData (username) {

  return {

    pic: 'https://github.com/' + username + '.png?size=200',

    link: 'https://github.com/' + username

  }

}

理论上来说，根本没有问题；这完全是正确的 JavaScript 代码。但不是函数组合。这个不使用组合的版本还可能存在几个问题。如果要在其他地方需要用户的 GitHub 链接，那么可能需要重复的代码。好的函数应该遵守"DOT”规则：

只做一件事

这个函数做了好几件事（无论有多小）；创建两个不同的 URL，将它们存储为对象上的某个属性，然后返回该属性。在组合版本中，每个函数只做一件事：

• getProfileLink – 只构建用户的 GitHub 个人资料链接字符串
• getProfilePic – 只构建用户的 GitHub 个人资料照片字符串
• getProfileData – 返回新的对象

React 与函数组合

React 频繁利用函数组合！React 使用组件构建 UI 的各个部分。我们看看一些伪代码示例。以下是三个不同的组件：

<Page />

<Article />

<Sidebar />

现在我们将这些简单的组件组合到一起，并创建更复杂的组件（又叫做 组合action！）：

<Page>

  <Article />

  <Sidebar />

</Page>

现在，Page 组件里面具有 Article 和 Sidebar 组件。就像之前的示例那样，getProfileData 里具有 getProfileLink 和 getProfilePic。

稍后我们将讲解组件，暂时先记住组合在构建 React 组件的过程中发挥了很大的作用。

函数组合总结

函数组合是指将简单的函数组合到一起并形成更复杂的函数。可以将每个函数看做一个只做一件事 (DOT)的构建模块。当你将这些简单的函数组合到一起并形成更复杂的函数时，这就叫做函数组合

https://www.linkedin.com/pulse/compose-me-function-composition-javascript-kevin-greene/

https://ramdajs.com/0.21.0/index.html

https://github.com/ramda/ramda

https://hackernoon.com/javascript-functional-composition-for-every-day-use-22421ef65a10

***

const people = ['Amanda', 'Geoff', 'Michael', 'Richard', 'Ryan', 'Tyler']

const excitedPeople = []

for (let i = 0; i < people.length; i++) {

  excitedPeople[i] = people[i] + '!'

}

const people = ['Amanda', 'Geoff', 'Michael', 'Richard', 'Ryan', 'Tyler']

["Amanda!", "Geoff!", "Michael!", "Richard!", "Ryan!", "Tyler!"]

const excitedPeople = people.map(name => name + '!')

const people = ['Amanda', 'Geoff', 'Michael', 'Richard', 'Ryan', 'Tyler']

const longNames = people.filter(name => name.length > 6)

<button onClick={activateTeleporter}>Activate Teleporter</button>

React 中的数据流总结

在 React 中，数据仅朝一个方向流动，即从父组件流向子组件。如果数据在兄弟子组件之间共享，那么数据应该存储在父组件中，并同时传递给需要数据的两个子组件。

就是 JavaScript

React 的优势之一是你要用到的很多功能都使用的是普通的 JavaScript。在过去几年内，函数式编程对 JavaScript 生态系统和社区产生了很大的影响。函数式编程是 JavaScript 中一个高级课题，涉及的内容用数百本书才能讲完。它太复杂了，以至于无法专研函数式编程的优势（我们还是要讲解 React 内容吧？）。React 基于的是大量的函数式编程的技巧…你将在这门课程中学习这些技巧。但是，有几个 JavaScript 函数对函数式编程来说非常重要，我们应该了解这些函数。这些函数包括 .map() 和 .filter() 方法。

我们详细了解下 .map() 和 .filter() 数组方法。

Array 的 .map() 方法

如果你不熟悉 JavaScript 的 Array .map() 方法 的话，其实它是在现有的数组上被调用，然后根据当做参数传入的函数返回的内容返回新的数组。我们看看：

const names = ['Michael', 'Ryan', 'Tyler'];

const nameLengths = names.map( name => name.length );

看看发生了什么情况。.map() 方法适用于数组，因此首先要有数组：

const names = ['Michael', 'Ryan', 'Tyler'];

我们针对 names 数组调用 .map() 并传入一个函数作为参数：

names.map( name => name.length );

names 数组中的每一项都会调用传递给 .map() 的箭头函数！箭头函数接收数组中的第一个名称，将其存储在变量 name 中，并返回其长度。然后对剩下的两个名称执行相同的操作。

.map() 返回新的数组，该新数组的每一项都是箭头函数所返回的值：

const nameLengths = names.map( name => name.length );

因此 nameLengths 将为新的数组 [7, 4, 5]。一定要理解这一点；.map() 方法返回新的数组，它没有修改原始数组。

上面只是简单地介绍了 .map() 方法的运行原理。要深入了解该方法，请访问 MDN 上的 .map()。

.map() 测验

使用提供的音乐数据数组和 .map() 方法创建一个新的数组，并包含以下格式的元素：

<album> by <name> sold <sales> copies

将新数组存储在 albumSalesStrings 数组中。因此 albumSalesStrings 数组中的第一项应该是 "25 by Adele sold 1731000 copies"

Map 方法测验解决方案代码

Array 的 .filter() 方法

JavaScript 的 Array .filter() 方法 和 .map() 方法相似：

• 在数组上被调用
• 传入函数作为参数
• 返回新的数组

区别在于传递给 .filter() 的函数用作检验条件，数组中只有通过检验的项目才会包含在新数组中。我们看一个示例：

const names = ['Michael', 'Ryan', 'Tyler'];

const shortNames = names.filter( name => name.length < 5 );

和之前一样，起始数组如下：

const names = ['Michael', 'Ryan', 'Tyler'];

我们对 names 数组调用 .filter() 并向其传递一个函数作为参数：

names.filter( name => name.length < 5 );

和 .map() 一样，names 数组中的每一项都会调用传递给 .filter() 的箭头函数。第一项（即 'Michael'）存储在 name 变量中。然后进行检验，也就是进行实际的过滤操作。它会检查名称的长度，如果大于等于 5，那么就跳过该名称（并且不包含在新数组中！）。但是，如果名称的长度小于 5，那么 name.length < 5 返回 true 并且该名称包含在新数组中！

最后，和 .map() 一样，.filter() 方法返回新的数组，而不是修改原始数组：

const shortNames = names.filter( name => name.length < 5 );

因此 shortNames 将为新数组 ['Ryan']。注意，现在它里面只有一个名称，因为 'Michael' 和 'Tyler' 都是 5个字符或更长，被滤除了。

上面只是简单地介绍了 .filter() 方法的运行原理。要深入了解该方法，请访问 MDN 上的 .filter()。

.filter() 测验

使用提供的音乐数据数组和 .filter() 方法创建一个新的数组，其中仅包含名称在 10 和 25 个字符之间的专辑。将新数组存储在变量 results 中。

Filter 测验解决方案代码

将 .map() 和 .filter() 组合到一起

.map() 和 .filter() 的如此强大之处在于它们可以组合到一起。因为两个方法都返回数组，因此我们可以将它们的方法调用链到一起，一个方法返回的数据可以是另一个方法的新数组。

const names = ['Michael', 'Ryan', 'Tyler'];

const shortNamesLengths = names.filter( name => name.length < 5 ).map( name => name.length );

详细讲解下，names 数组被过滤，并返回新的数组，然后对该新数组调用 .map()，并再次返回新的数组！.map() 返回的新数组存储在 shortNamesLengths 中。

首先是 .filter()！

提醒下，你需要按照一定的顺序组合二者（先是 .filter()，然后是 .map()）。因为 .map() 针对数组中的每项都调用一次函数，因此如果数组已经过滤过的话，运行速度会更快。

.filter() 和 .map() 测验

使用同一音乐数据和 .filter() 及 .map() 来过滤并映射列表，将结果存储在变量 popular 中。使用 .filter() 从列表中过滤出销量超过 1,000,000 张的专辑。然后对返回的数组调用 .map()，并创建一个项目格式如下的新数组：

<artist> is a great performer

popular 数组中的第一项将为 'Adele is a great performer'。

Filter & Map 测验解决方案代码

React 就是 JavaScript 总结

React 是在你已经了解的 JavaScript 基础上构建而成的！你不需要学习特殊的模板库或新的执行方式。

你将经常用的两个主要方法是：

• .map()
• .filter()

请务必熟练使用这两个方法，请花些时间练习使用它们。不妨查看你的一些现有代码并尝试将你的 for 循环转换为 .map() 调用，或者看看是否能够使用 .filter() 删除任何 if 语句。

JSX 也返回一个根元素

在编写 JSX 时，请记住，它只能返回一个元素。该元素可以有任何数量的子元素，但是只能有一个根元素封装整体 JSX （通常是一个 <div> 或 <span>）。请看看下面的示例：

const message = (

  <div>

    <h1>All About JSX:</h1>

    <ul>

      <li>JSX</li>

      <li>is</li>

      <li>awesome!</li>

    </ul>

  </div>

);

注意到上述代码中只有一个 <div> 元素，其他所有 JSX 都嵌套在其中了吗？如果你想要多个元素，就应该这么编写。为了完全弄明白这一点，下面的示例不正确，将导致错误：

const message = (

  <h1>All About JSX:</h1>

  <ul>

    <li>JSX</li>

    <li>is</li>

    <li>awesome!</li>

  </ul>

);

在此示例中，我们有两个兄弟元素，它们都在根级别（即 <h1> 和 <ul>）。这样是不可行的，会产生错误。

Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag

因为我们知道 JSX 只是 .createElement() 的语法扩展，因此是合理的；.createElement() 只获得一个标签名称（字符串）作为其第一个参数。

组件简介

到目前为止，我们已经看到 .createElement() 和 JSX 可以帮助我们生成一些 HTML。但是，通常我们将使用 React 的主要功能之一来构建 UI：组件。组件是指可以重复利用的代码段，最终负责返回要渲染到网页上的 HTML。很多时候，你将看到用 JSX 编写的 React 组件。

因为 React 的侧重点是简化应用的 UI 构建过程，因此在任何 React 组件类中，只有一个方法是必须的：render()。

我们开始构建我们的首个组件类吧！

npm install -g create-react-app