React学习（二）——组件的运用和数据传递

    大家好，我是凯文，本篇文章主要围绕React框架的组件以及组件之间数据的传递展开，并通过实例来实现特定的功能。下面先来简单介绍一下React的组件，由本人学习实践所得，用于做笔记，仅供参考。

     React框架的一大特色就是它通过组件化的方式来构建和渲染前端页面，了解过React基础知识的小伙伴应该知道，React框架采取的是虚拟的DOM，也就是说，在呈现实际的Web页面之前，首先编排出虚拟化的DOM元素，在确定了要显示的内容和显示方式后，再将HTML页面渲染出来。

    而组件就是页面编排过程中很重要的组成部件，就像搭积木一样，把组件一块一块地拼接起来，可以把这块拼上去，也可以把那块拆下来。具体知识各位可以参照React官方手册。

    React官方中文文档地址：    https://doc.react-china.org/

    了解了组件之后，就需要理解“Props”和“State”的用法。首先来介绍State，State按照字面意思理解为状态，其代表着组件本身的属性，State中可以储存许多内容、参数，需要注意的是，State中的属性只能在组件内部声明和使用。

    而Props是上一层的组件传递给下一层的参数，比如：有两个组件，“main”和“view”，main是上一层的组件，view被包含在main当中，是main的子组件，那么main组件就可以把参数通过Props传递给view组件。这一过程是不可逆的，无法从view传回到main，也就涉及到了React框架的单向数据流的特性。如下图所示：

    

    下面就直接通过实例来介绍组件和数据传递。

    在本人的上一篇文章中介绍了React项目的基本搭建方法，大家可以参考一下，也可以去网上查询React项目搭建方法。这里就不做太多介绍。

    凯文的React项目基本搭建方法地址：     https://blog.youkuaiyun.com/daxiazouyizou/article/details/79743832

    那我们先来创建一个React项目，并配置基础的依赖包。创建和配置完后，项目目录如下所示：

    打开public文件夹里面有index.html文件，下面来查看该文件内容。建议用文本编辑器进行操作，本人用的是VScode，直接将整个项目文件夹拖到VScode中打开，可以看到如下目录：

    点击index.html就可以查看该文件的内容，删去注释的文本后，内容呈现如下：

    我们可以看到，下方有一对<div>标签，其id是“root”，React框架的渲染内容正是呈现在该标签中。

    下面，我们将src文件夹下的所有文件都删除，这是默认页面的文件，也就是直接在cmd中 npm start 看到的页面内容。删除以后，来创建属于自己的index.js，这是主要渲染文件，其他文件都依附于此文件进行展开。

    创建index.js文件，内容如下：

import React from 'react';

import ReactDOM from 'react-dom';