React入门教程(二)

前言

距离上次我写 React 入门教程已经快2个月了，年头年尾老是比较忙哈，在React 入门教程(一)我大概介绍了 React 的使用和一些注意事项，此次让咱们来继续学习 React

1、 React 解决了什么？

前端有不少框架和库，可是他们不少都是解决相似的问题，而咱们去学习一个框架或者库，就应该对学习的库或者框架解决的问题深刻了解和去思考，这样对新的库和框架也不会太过于迷茫，由于你们解决的都是相似的问题。

而 React 解决的就是View层的问题，他帮助咱们把界面分红各个独立的块，这个块就是组件，而组件之间能够相互组合、嵌套，像拼积木同样拼成咱们的界面

React 的核心是使用组件定义界面的表现，它突出的就是开发组件化。组件之间很好的遵照了组件化开发的几个原则，开发出的组件都如同同一我的写的，大大下降了沟通成本和维护成本，以及提高了开发效率。

2、React 的基本环境安装

在React 入门教程(一)中我是在HTML中了引入 React 相关的库来教学和演示代码，可是实际开发中通常不会这么去写，使用 React 须要不少工具和库来辅助，编译阶段咱们须要 Babel ，组织代码须要 Redux 等第三方的状态管理工具，若是咱们写单页面应用咱们还须要 React-router 等等

废话很少说，咱们直接使用 React 官网所推荐使用的工具—— create-react-app 。它能够帮助咱们一键生成所须要的工程目录，并帮咱们作好各类配置和依赖，也帮咱们隐藏了这些配置的细节

在安装以前请确保你的机器安装了 node 环境，若是没有安装的同窗能够到node 官网下载对应的安装包

而后只须要按官网的指引安装便可，这种使用命令行的插件都是全局安装方便使用

$ npm install -g create-react-app

安装好之后就能够直接使用它来构建一个 react 工程：

$ create-react-app helloreact

完了之后咱们就能够启动了，进入目录而后经过 npm 启动：

$ cd helloreact
$ npm start

而后终端就会提示成功,会自动打开浏览器，就能看到咱们最熟悉的 React 的 Logo 了

咱们把 src/App.js 文件中的 h1 标签的内容修改成 Hello React试试看，而后你就会发现浏览器自动刷新，而且咱们的修改也生效了

3、在 React 工程如何建立\使用组件

在 src/App.js 中，咱们经过 import 引入 React 以及 css 和 logo ，而且写好组件后使用 export 导出去，若是有同窗对es6这些语法还不熟悉能够看阮一峰大佬的书 ECMAScript 6 入门 ,而后在咱们的入口文件 index.js 里经过 import 引入并渲染到根元素 root 中

咱们React里组件都是这样使用的，咱们的 index.js 还有一个 registerServiceWorker 方法，主要是用于在生产环境中为用户在本地建立一个 service worker 来缓存资源到本地，提高应用的访问速度

4、ref 和 React 中的 DOM 操做

在大多数状况下，咱们是不须要经过操做 DOM 的方式去更新 UI ，应该使用 setState 来从新渲染，甚至避免进行 DOM 操做，可是 React 不能知足全部的 DOM 操做的需求，有时候咱们仍是 DOM 操做，好比你想访问 DOM 结构来作某些事情，等等

React 提供了 ref属性来帮助咱们获取挂载后的元素实例，你能够给某个
元素加上 ref 属性，例如：

class Input extends Component {
  componentDidMount () {
    this.input.focus()
  }

  render () {
    return (
      <input ref={(input) => this.input = input} />
    )
  }
}

咱们能够给任意表明 HTML 元素标签加上 ref 从而获取到它 DOM 元素而后调用 DOM API。可是能不用 ref 就不用。特别是要避免用 ref 来作 React 本能够帮你作到的，在组件里咱们也能够加上 ref 标签，能够获取组件初始化的实例，可是也不建议这么作

5、 Prop 参数验证

以前我说起过 Prop 有参数验证，可是却没有为你们演示，由于

React.PropTypes 自 React v15.5 起已弃用。请使用 prop-types 库代替。
不少人以为对于参数验证都不觉得然，以为用不用都对程序功能也没什么影响，可是在构建多人，大型的应用程序是很重要的，不可忽视，这可让咱们在编译阶段就规避掉不少问题，而不是在运行的时候才发现，因此咱们可以发现 TypeScript 和 Flow 有不少人推崇，React 也是为了构建大型应用程序的，固然 TypeScript 和 Flow 不是咱们如今讨论的，之后有时间咱们再另做讨论

咱们须要单独安装一个 prop-types 的模块来帮助咱们进行验证
在 helloreact 下使用命令

$ npm install prop-types --save

咱们把APP改为下面的例子

import React, { Component } from 'react';
import './App.css';
import PropTypes from "prop-types";
class App extends Component {

  render() {
    return (
      <div className="App">
          <h1 className="App-title">Hello {this.props.age}</h1>
      </div>
    );
  }
}
App.propTypes = {
  age: PropTypes.number
};
export default App;

而后在index中在App组件中加入age属性并传入字符串

ReactDOM.render(<App age={'1'}/>, document.getElementById('root'));

咱们看看浏览器，虽然页面仍是刷新了也正常显示，可是咱们打开控制台就会发现一个报错信息：

能够看到错误提示咱们age应该是 number 类型的而不是 string 类型

咱们经过 PropTypes 给组件的参数作类型限制，能够迅速定位错误，也能够给组件加上 propTypes，让组件的开发、使用更加规范清晰。

6、 再谈React 的 生命周期

上一篇我为了方便你们了解 React 的生命周期，写了一个流转的例子，而什么是生命周期？每个生物都有他本身的生命周期，从出生、少年、成年再到死亡，放到 React 组件里就是挂载组件到卸载组件的过程， React 为咱们提供生命周期的钩子，咱们就能够为其作不少事情，好比在挂载完成后请求数据，或者在卸载前清除一些事件

我重复说了一遍React的生命周期，只是但愿你们能够重视并清楚生命周期的重要性

下面是一个React的生命周期的图片能够结合我上篇的例子来观看，理清楚React的建立时，state在流动的状况以及render函数的时机：

总结

React的理念就是组件化界面，使用各个独立的组件来组合出界面，并利用props&state，以及生命周期来构造各类复杂的应用

虽然咱们有可能一开始会比以前写更多的代码，可是代码是须要维护的，组件化可以可以让咱们有更清晰的思路去阅读代码，当你拥有不少组件的时候，组件复用会让你写更少的代码