React

你知道 React.js 是个前端应用框架，但你经常看到它跟 Redux 一块儿出现，于是就懵了。Redux 可以作为应用里面的一部分，它可以帮我们管理应用里面的数据（State Management）。应用复杂到一定程度的时候，你需要一套更好的方法来控制各种组件上面显示的数据。

宁皓网最近推出的 Redux 课程，帮你理解 Redux 上的核心概念，还介绍了在 React 应用上使用 Redux 的方法。如果你用的是 Vue.js 框架，可以使用 Vuex 来管理应用数据。

订阅宁皓网，来学一下用 React.js 开发前端应用。

找份前端工作，或自己创业做个项目。应用的前端部分少不了用 Vue.js 与 React.js 这两个框架其中的一个。在国内腾讯，阿里这样的公司也都在使用它们。在 Github 托管的所有开源项目里面，当前 React 排第四，Vue 排第六。

用最简单的例子，演示最核心的东西。跟随最近发布的《Vue.js：应用案例》，《Vue.js：应用案例（Vuex）》，还有《React.js：应用案例》 这几个课程，您可以更好地理解这两个框架。配合宁皓网的其它相关课程，您应该可以开始使用它们去创建自己需要的应用了。

订阅宁皓网，在线学习所有 Vue.js 与 React.js 相关课程。

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

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

yarn add lodash

在项目文件里，可以直接导入 Lodash 的 Throttle 或 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