高级React组件

本章将重点介绍高级 React 组件的实现。我们将了解什么是高阶组件以及如何实现它们。此外,我们还将深入探讨 React 中更高级的主题,并用它实现复杂的交互功能。

引用 DOM 元素

有时候我们需要在 ReactDOM 节点进行交互。 ref 属性可以让我们访问元素中的一个节点,通常,访问 DOM 节点是 React 中的一个反模式,因为我们应该遵循它的声明式编程和单向数据流。当我们引入第一搜索组件时,就已经了解刀这些问题,但是在某些情况下,我们仍然要访问 DOM 节点。官方文档提到了三种情况

使用 DOM API(focus事件,媒体播放等)

调用命令式 DOM 节点动画

与需要 DOM 节点的第三方库集成

让我们通过 Search 组件这个例子看一下。当应用程序第一次渲染时,input 字段应该被聚焦。这是需要访问 DOM API 的一种用例。本章将展示渲染时聚焦 input 字段是如何工作的,但由于这个功能对于应用程序并不是很有用,所以我们将在本章之后省略这些更改。尽管如此,你仍然可以为自己的应用程序保留它。

通常,无状态组件ES6 类组件中都可以使用 ref 属性。在聚焦 input 字段的用例中,我们就需要一个生命周期方法。这就是为什么接下来会先在 ES6 类组件中展示如何使用 ref 属性。

第一步是将无状态组件重构为 ES6 类组件。

class Search extends Component {
render() {
const {
value,
onChange,
onSubmit,
children
} = this.props; return (
<form onSubmit={onSubmit}>
<input
type="text"
value={value}
onChange={onChange}
/>
<button type="submit">
{children}
</button>
</form>
);
}
}

ES6 类组件的this对象可以帮助我们通过 ref 属性引用 DOM 节点。

class Search extends Component {
render() {
const {
value,
onChange,
onSubmit,
children
} = this.props; return (
<form onSubmit={onSubmit}>
<input
type="text"
value={value}
onChange={onChange}
ref={(node) => { this.input = node; }}
/>
<button type="submit">
{children}
</button>
</form>
);
}
}

现在,你可以通过使用 this 对象、适当的生命周期方法和 DOM API 在组件挂载的时候来聚焦 input 字段

lass Search extends Component {
componentDidMount() {
if(this.input) {
this.input.focus();
}
} render() {
const {
value,
onChange,
onSubmit,
children
} = this.props; return (
<form onSubmit={onSubmit}>
<input
type="text"
value={value}
onChange={onChange}
ref={(node) => { this.input = node; }}
/>
<button type="submit">
{children}
</button>
</form>
);
}
}

当应用程序渲染时,input 字段应该被聚焦。这就是ref属性的基本用法。

但是我们怎样在没有this对象的无状态组件中访问ref属性呢?接下来我们在无状态组件中演示。

const Search = ({
value,
onChange,
onSubmit,
children
}) => {
let input;
return (
<form onSubmit={onSubmit}>
<input
type="text"
value={value}
onChange={onChange}
ref={(node) => input = node}
/>
<button type="submit">
{children}
</button>
</form>
);
}

加载

现在让我们回到应用程序。当向 Hacker News API 发起搜索请求时,我们想要显示一个加载指示符。

请求是异步的,此时应该向用户展示某些事情即将发生的某种反馈。让我们在 src/App.js 中定义一个可重用的 Loading 组件。

const Loading = () =>

<div>Loading ...</div>

现在你将需要一个属性来存储加载状态。根据加载状态可以决定稍后是否显示所加载的组件。

src/App.js

class App extends Component {
constructor(props) {
super(props); this.state = {
results: null,
searchKey: '',
searchTerm: DEFAULT_QUERY,
error: null,
isLoading: false,
}; ...
} ... }

isLoading 的初始值是 false。在 App 组件挂载完成之前,无需加载任何东西。

当发起请求时,将加载状态 (isLoading) 设置为 true。最终,请求会成功,那时可以将加载状态 (isLoading) 设置为 false。

src/App.js

class App extends Component {

...

setSearchTopStories(result) {
... this.setState({
results: {
...results,
[searchKey]: { hits: updatedHits, page }
},
isLoading: false
});
} fetchSearchTopStories(searchTerm, page = 0) {
this.setState({ isLoading: true }); fetch(`${PATH_BASE}${PATH_SEARCH}?${PARAM_SEARCH}${searchTerm}&${PARAM_PAGE}\
${page}&${PARAM_HPP}${DEFAULT_HPP}`)
.then(response => response.json())
.then(result => this.setSearchTopStories(result))
.catch(e => this.setState({ error: e }));
} ... }

最后一步,我们将在应用程序中使用 Loading 组件。基于加载状态 (isLoading) 的条件来决定渲染 Loading 组件或 Button 组件。后者为一个用于获取更多数据的按钮。

src/App.js

class App extends Component {

    ...

    render() {
const {
searchTerm,
results,
searchKey,
error,
isLoading
} = this.state; ... return (
<div className="page">
...
<div className="interactions">
{ isLoading
? <Loading />
: <Button
onClick={() => this.fetchSearchTopStories(searchKey, page + 1)}>
More
</Button>
}
</div>
</div>
);
}
}

由于我们在componentDidMount()中发起请求,Loading 组件会在应用程序启动的时候显示。此时,因为列表是空的,所以不显示 Table 组件。当响应数据从 Hacker News API 返回时,返回的数据会通过 Table 组件显示出来,加载状态 (isLoading) 设置为 false,然后 Loading 组件消失。同时,出现了可以获取更多的数据的“More”按钮。一旦点击按钮,获取更多的数据,该按钮将消失,加载组件会重新出现。

高阶组件

高阶组件(HOC)是 React 中的一个高级概念。HOC 与高阶函数是等价的。它接受任何输入 - 多数时候是一个组件,也可以是可选参数 - 并返回一个组件作为输出。返回的组件是输入组件的增强版本,并且可以在JSX中使用。

HOC可用于不同的情况,比如:准备属性,管理状态或更改组件的表示形式。其中一种情况是将 HOC 用于帮助实现条件渲染。想象一下现在有一个 List 组件,由于列表可以为空或无,那么它可以渲染一个列表或者什么也不渲染。当没有列表的时候,HOC 可以屏蔽掉这个不显示任何内容的列表。另一方面,这个简单的 List 组件不再需要关心列表存不存在,它只关心渲染列表。

高级排序

我们已经实现了客户端和服务器端搜索交互。因为我们已经拥了 Table 组件,所以增强 Table 组件的交互性是有意义的。那接下来,我们为 Table 组件加入根据列标题进行排序的功能如何?

你自己写一个排序函数,但是一般这种情况,我个人更喜欢使用第三方工具库。lodash就是这些工具库之一,当然你也可以选择适用于你的任何第三方库。让我们安装 lodash 并使用。

参考链接:https://leanpub.com/the-road-to-learn-react-chinese

The Road to learn React书籍学习笔记(第四章)的更多相关文章

  1. The Road to learn React书籍学习笔记(第三章)

    The Road to learn React书籍学习笔记(第三章) 代码详情 声明周期方法 通过之前的学习,可以了解到ES6 类组件中的生命周期方法 constructor() 和 render() ...

  2. The Road to learn React书籍学习笔记(第二章)

    The Road to learn React书籍学习笔记(第二章) 组件的内部状态 组件的内部状态也称为局部状态,允许保存.修改和删除在组件内部的属性,使用ES6类组件可以在构造函数中初始化组件的状 ...

  3. The Road to learn React书籍学习笔记(第一章)

    react灵活的生态圈 Small Application Boilerplate: create-react-app Utility: JavaScript ES6 and beyond Styli ...

  4. [Python学习笔记][第四章Python字符串]

    2016/1/28学习内容 第四章 Python字符串与正则表达式之字符串 编码规则 UTF-8 以1个字节表示英语字符(兼容ASCII),以3个字节表示中文及其他语言,UTF-8对全世界所有国家需要 ...

  5. 《metasploit渗透测试魔鬼训练营》学习笔记第四章—web应用渗透

    继续来学习metasploit...记好笔记是很重要的,下面开始正文: 二.WEB应用渗透技术     1.WEB应用渗透基础知识        先介绍WEB应用攻击的主要类型(大致介绍,具体请自行查 ...

  6. [core java学习笔记][第四章对象与类]

    4.3 用户自定义类 4.3.1 类数组的声明 需要两次new Employee[]=staff=new Employedd[3]; staff[0]=new Employedd(参数列表); sta ...

  7. Java 学习笔记 ------第四章 认识对象

    本章学习目标: 区分基本类型与类类型 了解对象与参考的关系 从打包器认识对象 以对象观点看待数组 认识字符串的特性 一."=" 和 "==" 当=用于基本类型时 ...

  8. c语言学习笔记第四章——字符串和格式化输入、输出

    B站有视频演示 本章学习printf函数的输入输出,字符串的定义与实用. 字符串 字符串(character string)是一个或多个字符的序列,如下所示: "Zing went the ...

  9. 《Python基础教程(第二版)》学习笔记 -> 第四章 字典

    字典是Python中唯一内建的映射类型. 字典中的值并没有特殊的顺序,但是都存储在一个特定的键(Key)里.键可以是数字.字符串甚至是元组. 字典的使用 某些情况下,字典比列表更加适用: 表征游戏棋盘 ...

随机推荐

  1. dedecms 去掉栏目页的预览功能

    首先找到include/typeunit.class.admin.php 再找到 ListAllType 方法,该方法的功能是“读出所有分类” 找到并将该方法内的所以以下代码注释或者删除”<a ...

  2. 随tomcat启动的Servlet程序

    由于需要做一定定时轮询程序,自己写了一个Servlet小程序,在Servlet里面的Init函数中做一个Timer,定时执行程序. 代码如下: public class MailStartup  ex ...

  3. ubuntu 可以加速播放的播放器SMPlayer 16.4安装

    直接贴命令 sudo apt-add-repository ppa:rvm/smplayer sudo apt-get update sudo apt-get install smplayer smp ...

  4. Android(java)学习笔记49:通过反射获取私有构造方法并且使用

    1. 反射获取私有构造方法并且使用: (1)获取字节码文件.class对象:          Class c = Class.forName("cn.itcast_01.Person&qu ...

  5. 类型系统(type system)是一门编程语言最核心也是最基础的部分---编程语言最终的目标,本质上无非是回答两个问题:如何表示信息、如何处理信息

    https://www.cnblogs.com/feng9exe/p/9712059.html 类型系统(type system)是一门编程语言最核心也是最基础的部分.无论该语言基于何种编程范式,都必 ...

  6. React中最基础的jsx语法

    import React, { Component } from 'react'; class App extends Component { render() { return ( <div ...

  7. POJ 1088 滑雪 【记忆化搜索经典】

    题目链接:http://poj.org/problem?id=1088 滑雪 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions:  ...

  8. Github 上一些关于PHP的开源项目

    Github  上一些关于PHP的开源项目,总有你喜欢的那一款 Awesome PHP Package Management Package Management Related Frameworks ...

  9. ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(七)之 图文,附件消息(2016-05-05 12:13)

    上一篇介绍了加好友的流程,这里不再赘述,不过之前的聊天只能发送普通文字,那么本篇就教你如何实现发送附件和图片消息.我们先对功能进行分析: 发送图片,附件,需要实现上传图片和附件的功能. textare ...

  10. eclipse集成tomcat 部署项目设置

    ============================================================= 1. 下载安装tomcat插件 ====================== ...