轻松入门React和Webpack.docx

轻松入门React和Webpack最近在学习React.js，之前都是直接用最原生的方式去写React代码，发现组织起来特别麻烦，之前听人说用Webpack组织React组件得心应手，就花了点时间学习了一下，收获颇丰。说说React一个组件，有自己的结构，有自己的逻辑，有自己的样式，会依赖一些资源，会依赖某些其他组件。比如日常写一个组件，比较常规的方式：－ 通过前端模板引擎定义结构－ JS文件中写自己的逻辑－ CSS中写组件的样式－ 通过RequireJS、SeaJS这样的库来解决模块之间的相互依赖，那么在React中是什么样子呢？结构和逻辑在React的世界里，结构和逻辑交由JSX文件组织，React将模板内嵌到逻辑内部，实现了一个JS代码和HTML混合的JSX。结构在JSX文件中，可以直接通过React.createClass来定义组件：var?CustomComponent?=?React.creatClass({??render:?function(){??return?();??}?});?通过这种方式可以很方便的定义一个组件，组件的结构定义在render函数中，但这并不是简单的模板引擎，我们可以通过js方便、直观的操控组件结构，比如我想给组件增加几个节点：通过这种方式，React使得组件拥有灵活的结构。那么React又是如何处理逻辑的呢？逻辑写过前端组件的人都知道，组件通常首先需要相应自身DOM事件，做一些处理。必要时候还需要暴露一些外部接口，那么React组件要怎么做到这两点呢？事件响应比如我有个按钮组件，点击之后需要做一些处理逻辑，那么React组件大致上长这样：var?ButtonComponent?=?React.createClass({??render:?function(){??return?(屠龙宝刀，点击就送);??}?});?点击按钮应当触发相应地逻辑，一种比较直观的方式就是给button绑定一个onclick事件，里面就是需要执行的逻辑了：function?getDragonKillingSword()?{??//送宝刀?}?var?ButtonComponent?=?React.createClass({??render:?function(){??return?(屠龙宝刀，点击就送);??}?});?这样就实现内部事件的响应了，那如果需要暴露接口怎么办呢？暴露接口事实上现在getDragonKillingbr?Sword已经是一个接口了，如果有一个父组件，想要调用这个接口怎么办呢？父组件大概长这样：var?ImDaddyComponent?=?React.createClass({??render:?function(){??return?(??//其他组件??//其他组件??);??}?});?那么如果想手动调用组件的方法，首先在ButtonComponent上设置一个ref=属性来标记一下，比如这里把子组件设置成，那么在父组件的逻辑里，就可以在父组件自己的方法中通过这种方式来调用接口方法：this.refs.getSwordButton.getDragonKillingSword();?看起来屌屌哒~那么问题又来了，父组件希望自己能够按钮点击时调用的方法，那该怎么办呢？配置参数父组件可以直接将需要执行的函数传递给子组件：然后在子组件中调用父组件方法：var?ButtonComponent?=?React.createClass({??render:?function(){??return?(屠龙宝刀，点击就送);??}?});?子组件通过ps能够获取在父组件创建子组件时传入的任何参数，因此ps也常被当做配置参数来使用。屠龙宝刀每个人只能领取一把，按钮点击一下就应该灰掉，应当在子组件中增加一个是否点击过的状态，这又应当处理呢？组件状态在React中，每个组件都有自己的状态，可以在自身的方法中通过this.state取到，而初始状态则通过getInitialState()方法来定义，比如这个屠龙宝刀按钮组件，它的初始状态应该是没有点击过，所以getInitialState方法里面应当定义初始状态clicked: false。而在点击执行的方法中，应当修改这个状态值为click: true：var?ButtonComponent?=?React.createClass({??getInitialState:?function(){??//确定初始状态??return?{??clicked:?false??};??},??getDragonKillingSword:?function(){??//送宝刀??//修改点击状态??this.setState({??clicked:?true??})