使用React实现图片画廊（送女朋友必备）

最新推荐文章于 2024-08-09 07:23:58 发布

一天一颗蛋的开心

最新推荐文章于 2024-08-09 07:23:58 发布

阅读量2.7k

点赞数

分类专栏：个人作品文章标签： github React 图片画廊 webpack

本文链接：https://blog.csdn.net/Chenkaixin0512/article/details/77666793

版权

本文介绍了作者使用React和webpack创建一个图片画廊项目的经历，详细讨论了React组件创建、生命周期方法以及项目构建过程。通过这个项目，作者旨在熟悉React和webpack的工作原理。在开发过程中，还涉及到了兼容性问题、3D变换、样式调整等技术细节。

摘要由CSDN通过智能技术生成

个人站点：chenkaixin.cn
github：https://github.com/KaixinChen0512

这个小项目用到的主要技术是React以及webpack，历时差不多断断续续三天时间吧，初衷是为了入门react以及对webpack的工作原理有个更深刻的认识，当然其中也遇到了不少难题，现做记录，话不多说了，上效果图。
画廊效果图

初识React

首先通过React的createClass方法来创建一个React的组件，注意，这里创建的并不是真实的DOM节点:

var Hello = React.createClass(
  // 添加function、state等
  render: function() {
   
    return <div>Hello {
  this.props.name}</div>
  }
)

在ES6中可以通过class Hello extends React.Component{}，来实现创建React组件；
用render(){}来替代render:function(){}
然后通过调用React的render方法来创建一个组件的实例：

ReactDOM.render(<Hello name="React!" />,
document.getElementById('container')
);

其中render方法接受两个参数，第一个是React的组件，第二个是要插入的DOM节点。

React生命周期

有三个状态：
+ Mounted：组件被render解析生成相对应的DOM节点并被插入浏览器的一个过程
+ Update：一个Mounted的组件被重新render的过程（会将当前state和最近一次的state对比，只有发生改变了并且影响了DOM结构才会进行重新渲染）
+ Unmounted：将一个组件对应的DOM节点从DOM结构中移除的过程
每个状态都封装了hook函数（钩子函数）:
常用的钩子函数：
+ getI