初识React

最近在学习React，主要通过React官方网站以及观看视频、阅读手记的方式对React进行了解。同时也根据学习的内容做了一个小小的实例，想借此机会可以把自己学习的知识记录下来。如果其中存在错误，请大家多多指教。
在本次实例中，最终运行的效果：
（1）用户界面的初始页面，其中宾川红提、宾川青提以及宾川柑橘分别对应三个标签。

（2） 单击宾川红提，用户界面如下：

（3）单击宾川青提，用户界面如下：

（3）单击宾川柑橘，用户界面如下：

上述4图是最终的效果，下面我们将分布介绍实现过程。
1.1 遍历构建有状态组件
![在这里插入图片描述](https://img-blog.csdnimg.cn/2019042419364161.pn


这里，我们使用map（）方法遍历数组quickListNow，对数组中的每一个元素返回

• 标签。但是在上面的实例中，将quickList:直接放在组件的this.state中显然是不够合理的，因为这样做对组件的复用有较大的影响，所以我们对代码进行修改，直接从外部传入quickList:的数据，组件利用props属性获取，修改部分为：
  
  
  此时，将组件挂载到DOM中的方法为：
  ReactDOM.render(,document.getElementById(‘root’));
  通过上述实现，组件QuickList 的复用性明显提高。此时，用户界面的初始效果如下：
  
  也就是说，在用户没有点击标签时，此时页面显示得内容比较简单，这与普遍的网页不太一眼，我们往往希望的是页面被加载后，我们还是希望页面上可以显示一些内容，所以我们利用组件的生命周期函数，在组件的神明周期函数componentWillMount（）函数里先对状态quickListNow赋一个初值，在实例中，我赋值为null；然后在组件QuickList 的render（）函数中采用三目运算符对quickListNow是否为null进行判断，如果为null，则引用另一个子组件Introduction，否则，按正常的map方法遍历quickListNow。
  其中，Introduction组件的定义如下：
  
  其中，组件QuickList组件的render（）函数对应修改为：
  
  这里，采用了组合组件的形式给页面被挂载后显示一个类似于首页的效果。此时，通过上面的介绍，就可以最终实现本文最开始介绍的四个效果。
  提示：在本实例的实现过程中，在map方法中，遍历静态图片是，如果直接采用：
  
  这样在最终的页面显示中并没有显示图片。在该实例中，我的解决办法如下：
  采用import导入静态图片：
  
  这样就可以正常的显示静态图片了。
  感谢大家的阅览，如果描述不当的地方请大家批评指正。