一个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的打印即可
领取专属 10元无门槛券
私享最新 技术干货