我从哪里来，要到那里去：一个React组件的前世今生

一个React组件的前世今生

1、什么是React？

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

2、React有哪些关键知识点？

网上有不少好教材，这里就不在做原理性的讲解，重点讲一下任何动手，“知道”没有意义，“做到”才有产生价值。

2.1、熟悉JSX语法

http://www.runoob.com/react/react-jsx.html

2.2、了解React组件的生命周期

http://www.runoob.com/react/react-component-life-cycle.html

2.3、了解React的数据组织方式

http://www.runoob.com/react/react-state.html

http://www.runoob.com/react/react-props.html

2、学习React的最好方法

动手

3、动手的最快方式

直接使用antd pro，环境搭建参考文章：https://www.jianshu.com/p/9a9acc4411ba?from=groupmessage&isappinstalled=0

4、教学示例

4.1、创建一个React组件ShopMgr

在src/pages目录下面新建文件ShopMgr.js，内容如下

4.2、将ShopMgr挂载到页面上

修改config/router.config.js，查找/dashboard/analysis，找到下面的代码段

将其修改为：

4.2、启动项目

在浏览器上输入http://127.0.0.1:8000/dashboard/analysis，你将会看到下面的页面：

4.3、练习对内部数据state的操作

初始化容器：

获取中的数据：

修改容器中的数据：

我们做一个计数器，作为练习工具：修改ShopMgr，为其增加一个显示器，两个按钮，分别进行加一减一操作

4.4、练习对外部数据的操作

我们修改上面的例子，增加一个奇数判断器，作为计数器的子组件，计数器的内部count作为奇数判断器的外部数据。

获取外部数据

4.4、跟踪组件的生命周期

观察IsOddNum的打印即可