【译】函数式的React

gnehc 发布于2019-08-23 17:19 / 1107人阅读

摘要：高阶组件和高阶函数高阶组件是编程中的常见模式。您可以将上面例子中的高阶函数用函数的方式来重新整理如你所见，这就像是一个高阶函数，这个函数接受一个函数，返回一个新的元素。函数式编程范例旨在避免在应用程序中使用状态。

原文：The functional side of React
作者：Andrea Chiarelli
译者：博轩

React 是现在最流行的 JavaScript 库之一。使用 React 可以非常轻松地创建 Web 用户交互界面。它的成功有很多因素，但也许其中一个因素是清晰有效的编程方法。

在 React 的世界中，UI 是由一个一个组件所组成的。组件可以组合在一起以创建其他组件，应用本身就是一个包含了所有组件的一个大组件。开发者使用 React 会很容易联想到：面向对象编程。因为定义组件的语法本身，就会给人这种感觉：

class HelloReact extends Component {
  render() {
    return (Hello React!);
  }
}

然鹅，在面向对象的的表象之下，React 隐藏了一种函数式的特质。让我们看看这些特质都是什么？

使用 render() 渲染输出

React 组件的一大特征是是包含了 render() 方法。没有包含 render() 方法的组件不是 React 组件。render() 方法总会返回一个 React 元素，这种行为就像是组件的一种特征一样。换句话说，React 会要求任何组件必须有输出。组件是根据输入来返回输出的，这样来考虑组件的话，就会让你感觉组件更像一个函数，而不是一个对象。

组件就是一个函数

实际上，您不仅可以将 React 组件视为函数。您还可以用函数来实现组件。以下代码展示了如何使用函数实现上面定义的组件：

const HelloReact = () => Hello React!
;

如您所见，它是一种实现组件的简单而紧凑的方法。

此外，您可以将参数传递给函数：

const Hello = (props) => Hello {props.name}!
;

在上面的示例中，您传递了 props 参数，这里的 props 对象用于将数据从一个组件传递到另一个组件。

props 的不变性

如你所知，props 是不可改变的，你可以阅读他们，但你无法改变它们。这也正是 React 组件的函数特性之一。props 是组件的输入参数，因此给予其不可变性可以避免副作用。实际上，这也是函数式编程的基本原则之一：函数不能更改输入参数。

译注：纯函数的介绍，推荐看下这个 - 函数式编程 - wiki，以及我之前翻译过的 【译】JavaScript 中的函数式编程原理

单项数据流

关于 React，它的另一个特性就是单项数据流。这意味着在组件的层次结构中，数据必须从较高的组件流向较低的组件，反之亦然。如果我们将组件视为对象，这个观点就会显得有些牵强。相反，如果我们从函数的角度去考虑组件，就会显得很自然。

考虑一下下面的代码：

class App extends Component {
  render() {
    return ()
  };
}

class Hello extends Component {
  render() {
    return (Hello {props.name}!);
  }
}

例子中有两个组件：App 组件使用 Hello 组件来展示 “Hello React!” 。同时，例子中也隐式的定义了组件之间的层次结构。但是乍一看，无法通过 name 属性来来看清楚数据的流向。

现在，让我们来看看使用函数修改之后的代码：

const App = () => ;
const Hello = (props) => Hello {props.name}!
;

通过上面组件的层级结构可以清楚的看出，不过是 App() 和 Hello()，两个函数的组合。你也可以将其视为下面的内容：

const App = () => Hello("React");

从上面的例子中就可以很明显的看出，“React” 文本是怎样在 App 组件中传递的了。

译注：这里原文例子中使用的是 const App = () => Hello("John"); ，和文章中的 "React" 不相符，所以我改了例子中传递的文案，嘿嘿嘿...

组合 vs 继承

在面向对象的编程范例中，对于类，很容易将继承视为一种标准。但是，如果从函数的角度考虑 React 组件，继承就会显得不那么自然。

例如，假设您要升级 Hello 组件，以便它还可以显示 “欢迎消息” 。您可以将其与 Hello 组件组合来创建新组件，比如下面的例子：

const HelloAndWelcome = (props) => Welcome to React!
;

正如Facebook团队所宣称的那样，真的很少需要继承。

高阶组件和高阶函数

高阶组件是 React 编程中的常见模式。它允许重用组件逻辑来创建新组件。简单来说，高阶组件是一个函数，它将一个组件作为输入并返回一个新组件作为其输出。以下是高阶组件的示例：

const AddWelcome = (GreetingComponent) => {
  class TheNewComponent extends Component {
    render() {
      return (
        
          
          Welcome to React!
        );
      }
    }

  return TheNewComponent;
};

函数 AddWelcome() 接受 GreetingComponent 参数，并在新组件 TheNewComponent 定义的 render() 方法中使用它。这个新组件只是在 GreetingComponent 的输出后添加一条欢迎消息。最后，函数 AddWelcome()会返回新组件。

您可以使用此功能，如以下示例所示：

const HelloAndWelcome = AddWelcome(Hello);

通过使用 AddWelcome() 包装 Hello 组件，您将获得一个新组件。

您可以将上面例子中的高阶函数 AddWelcome() 用函数的方式来重新整理：

const AddWelcome = (GreetingComponent) => {
  const TheNewComponent = (props) => Welcome to React!;
  
  return TheNewComponent;
};

如你所见，这就像是一个高阶函数，这个函数接受一个函数，返回一个新的 React 元素。

组件和状态

应用程序的状态是随时间变化的数据集。函数式编程范例旨在避免在应用程序中使用状态。实际上，应用程序状态管理是软件开发中复杂性的主要来源之一。但是，由于你不能没有它，至少你应该尝试限制它的使用并使其更易于管理。

React 的开发指南促进了无状态组件的创建，即无 state 组件。这种组件的输出仅仅取决于传入的 props。无状态组件看起来很像纯函数，实际上也是如此。

但是，如您所知，在不使用 state 的情况下无法编写复杂的应用程序。诀窍是在应用程序的几个点上隔离 state ，如果在一个点上更好。此策略会要求开发人员在根组件中使用状态提升。换句话说，应该在上层节点中保留状态，而其后代应该是无状态组件。这样，我们可以更好地控制状态，因为它只由单个根组件管理。

结论

对于刚开始使用 React 的开发者来说，React 并不是像看起来那样，它更加适合函数式编码的原则，而不是面向对象的原则。通常，这允许开发者编写更加正式可验证的代码，例如使用自动化测试来测试应用程序。我建议充分利用 React 的函数特性来编写更易于维护的代码。

Andrea Chiarelli 是 Beginning React 的作者。

本文已经联系原文作者，并授权翻译，转载请保留原文链接

私有云服务器托管刀片式的服务器管家式的小区服务器 linux下编译阿里 linux下编译运行

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104163.html

[译]Vue 2.5 发布了

摘要：感谢来自团队的发起的，以及核心团队成员和的改进和审查。在中，我们已经发布了一个与环境无关的版本，可以在浏览器或纯引擎中使用。同样，我们建议你查看完整的发布说明从而了解其他的改进，包括，，，等。原文：Vue 2.5 released 译者：neal1991 welcome to star my articles-translator , providing you advanced ...

Drinkey 2019-08-21 17:03 评论0 收藏0
【译】TypeScript中的React高阶组件

摘要：原文链接高阶组件在中是组件复用的一个强大工具。在本文中，高阶组件将会被分为两种基本模式，我们将其命名为和用附加的功能来包裹组件。这里我们使用泛型表示传递到的组件的。在这里，我们定义从返回的组件，并指定该组件将包括传入组件的和的。原文链接：https://medium.com/@jrwebdev/... 高阶组件（HOCs）在React中是组件复用的一个强大工具。但是，经常有开发者在...

wizChen 2019-08-23 16:59 评论0 收藏0
Flux再进化：Introducing Relay and GraphQL译

摘要：它的设计使得即使是大型团队也能以高度隔离的方式应对功能变更。获取数据数据变更性能，都是让人头痛的问题。通过维护组件与数据间的依赖在依赖的数据就绪前组件不会被渲染为开发者提供更加可预测的开发环境。这杜绝了隐式的数据依赖导致的潜在。关于Relay与GraphQL的介绍原文：Introducing Relay and GraphQL 视频地址（强烈建议观看）：https://www.y...

cncoder 2019-08-21 10:26 评论0 收藏0
Top 15 - Material Design框架和类库(译)

摘要：这是一个用于构建响应式应用和网站的前端框架。是基于设计的一套丰富的组件。这是一个对混合式手机应用框架的扩展库。到目前为止它仅大小，而且不依赖于任何第三方的插件，它可以很轻量的被用来创建和应用。 _Material design_是Google开发的，目的是为了统一公司的web端和手机端的产品风格。它是基于很多的原则，比如像合适的动画，响应式，以及颜色和阴影的使用。完整的指南详情请看这里...

Cristic 2019-08-19 18:13 评论0 收藏0