博客

在介绍 React 表单使用的时候，我们创建一个 HelloForm 组件，组件里用了一个文本框，监听了文本框的 change 事件，用 handleChange 来处理这个事件。在这个事件处理里面，输出了文本框里面发生变化的值。有些动作我们不想执行的那么勤快，有一点点变化就去执行一些任务，这样太浪费。比如你想实时地把用户输入的内容保存在后端数据库里，后端可能受不大了，我们得去做点限制。可以用 Throttle 或 Debounce。

在 Lodash 这个库里有可以创建  Throttle 或 Debounce 函数的方法。先给项目安装一下 Lodash：

yarn add lodash

在项目文件里，可以直接导入 Lodash 的 Throttle 或 Debounce 。像这样：

在应用里有些功能（函数）你希望限制它的执行。比如一个实时搜索功能，用户在搜索框里输入想要找的东西，可以实时地显示搜索结果。这个功能我们可能要去监听搜索框里的 change 或者 input 事件，发生变化以后就去请求搜索。但是我们不希望每次有一点点变化就去执行搜索，这就需要使用 Throttle 或 Debounce 去限制一下这个搜索功能的执行。

Throttle 与 Debounce 都可以限制函数的执行，但是有一点区别。

Throttle

Throttle：函数在每个等待间隔时间里最多只能执行一次。使用 Throttle 的时候，可以提供一个要执行的函数，还要一个等待时长。比如我们要执行的函数是 search，等待的时长是 1000ms ，这样 search 这个函数在 1000ms 以内，最多就只能被调用一次。

Debounce

Debounce：直到从上一次 Debounce 函数被执行以后再经过一个设置的等待的时间以后，才会执行 Debounce 函数。就是我们设置个等待时间，这个时间过了以后才能调用函数，接着想要再次调用这个函数必须还要经过从上一次调用函数以后，再经过设置的等待时间以后才行。

HTML 的表单元素有自己的内部数据（State），用户在文本框里输入内容，勾选了复选框，这些行为会直接修改表单元素的内部数据。在 React 里，修改数据都要通过 setState 去做。下面这个练习可以帮你理解在 React 组件里的使用表单。

添加一个 HelloForm 组件：

class HelloForm extends Component {
  state = {
    text: ''
  }

  handleChange = (event) => {
    this.setState({
      text: event.target.value
    })
    console.log('输入：', event.target.value)
  }

  handleSubmit = (event) => {
    event.preventDefault()
    console.log('提交：', this.state.text)
  }

  render () {
    return (
      <form onSubmit={ this.handleSubmit }>
        <input type="text"
          value={ this.state.value }
          onChange={ this.handleChange } />
      </form>
    )
  }
}

在 React 组件的显示里面，我们经常需要根据组件里的数据去显示一个组件的列表。可以使用数组的 map 方法得到一组列表，然后放在组件的显示里用一下。注意列表里的每个项目都应该有个 key 属性，并且每个项目的  key 属性的值都应该不一样。下面这个练习可以帮您理解在 React 组件里显示列表。

有个 Message 组件是这样的：

const Message = (props) => {
  return <div>{ props.message }</div>
}

再改造一下 App 组件，先在组件的 State 里添加一组要显示的数据：

  state = {
    header: 'ninghao.net',
    show: false,
    messages: [
      { id: 0, text: 'hello ~'},
      { id: 1, text: 'hola ~'},
      { id: 3, text: '您好 ~'}
    ]
  }

上面我们添加了一个 messages ，它里面有一个 id 属性，还有个 text 属性，这个 messages 里的数据我打算用 Message 这个组件来显示。先去生成一个组件列表，在 App 组件的 render 方法里，用一下 map 方法：

const { messages } = this.state
const messageItems = messages.map(message => {
  return <Message key={ message.id } message={ message.text } />
})

有些东西在组件里你可能希望在特定条件下显示或者隐藏，或者要根据条件显示特定的内容。下面的练习可以帮你理解按条件显示。

src/components/App.js

先在 App.js 里添加一个新的组件，这个组件只负责显示，所以可以直接使用一个函数类型的组件。

const Message = (props) => {
  return <div>{ props.message }</div>
}

上面定义了一个叫 Message 的组件，函数类型的组件可以接受一个 props 参数，它就是从爸爸那里传递过来的属性。组件里面用了一组 <div> 标签，里面包装显示了属性里的 message 这个属性的值。

项目预览

想学用 React 创建前端应用，可以直接从最新的 React 课程《React：应用案例》开始。课程里会从头开始创建一个 React 应用，里面演示了 React 大部分的关键概念。用一天时间去练习这个课程，保证您对 React 框架产生感觉 ：）

订阅宁皓网，学习所有 React 与相关课程。

组件可以组合到一块儿去用，之前在 App 组件的显示里用了 h2 元素，现在我们把它单独定义成一个叫 Header 的组件，然后在 App 里用一下 Header 这个组件，这样 App 就是 Header 组件的爸爸（Parent），Header 是 App 的儿子（Child）。爸爸给儿子可以传递数据，儿子在显示的时候可以使用这些数据，传递的数据叫属性（Props）。

React 里的组件可能用函数来定义，也可以是个类（Class）。 使用类定义的组件有更多的功能，比如使用组件的生命周期函数，定义自己的方法，添加数据的数据（State） 等等。

下面用 Class 改造一下之前我们定义的 App 这个组件：

import React, { Component } from 'react'

class App extends Component {
  render () {
    return (
      <h2>ninghao.net</h2>
    )
  }
}

export default App

先要导入 React，再从 React 里面把 Component 拿出来用。React 组件的类可以继承这个 Component，定义的这个类的名字就是组件的名字。 组件里面要显示的东西用 render 方法返回。

State

组件内部使用的数据叫 State。 我们可以在组件里面自己定义需要的 State，数据有变化以后可以使用 setState 这个方法去设置组件的 State，这样组件会重新在界面上显示。

在 React 项目里可以使用 ES2015（ES6） 的模块系统，记住两个关键词：import 与 export，在一个文件里定义一个模块可以用 export 导出这个模块提供的功能。在其它的地方，可以 import，就是导入其它模块提供的功能。模块（Module），包（Package），这些词经常指的是同一种东西。

显示点东西

先在应用里显示点东西，比如一个大标题。在 src 下面创建一个 index.js，这个文件是应用的入口文件，把下面的内容放到这个 index.js 文件里：

src/index.js

一起来学一下基于 React 框架开发前端应用。