一个组件,有自己的结构,有自己的逻辑,有自己的样式,会依赖一些资源,会依赖某些其他组件。比如日常写一个组件,比较常规的方式:
那么在React中是什么样子呢?
在React的世界里,结构和逻辑交由JSX文件组织,React将模板内嵌到逻辑内部,实现了一个JS代码和HTML混合的JSX。
在JSX文件中,可以直接通过React.createClass
来定义组件:
var CustomComponent = React.creatClass({ render: function(){ return (<div className="custom-component"></div>); } });
通过这种方式可以很方便的定义一个组件,组件的结构定义在render函数中,但这并不是简单的模板引擎,我们可以通过js方便、直观的操控组件结构,比如我想给组件增加几个节点:
var CustomComponent = React.creatClass({ render: function(){ var $nodes = ['h','e','l','l','o'].map(function(str){ return (<span>{str}</span>); }); return (<div className="custom-component">{$nodes}</div>); } });
通过这种方式,React使得组件拥有灵活的结构。那么React又是如何处理逻辑的呢?
写过前端组件的人都知道,组件通常首先需要相应自身DOM事件,做一些处理。必要时候还需要暴露一些外部接口,那么React组件要怎么做到这两点呢?
比如我有个按钮组件,点击之后需要做一些处理逻辑,那么React组件大致上长这样:
var ButtonComponent = React.createClass({ render: function(){ return (<button>屠龙宝刀,点击就送</button>); } });
点击按钮应当触发相应地逻辑,一种比较直观的方式就是给button绑定一个onclick
事件,里面就是需要执行的逻辑了:
function getDragonKillingSword() { //送宝刀 } var ButtonComponent = React.createClass({ render: function(){ return (<button onclick="getDragonKillingSword()">屠龙宝刀,点击就送</button>); } });
但事实上getDragonKillingSword()
的逻辑属于组件内部行为,显然应当包装在组件内部,于是在React中就可以这么写:
var ButtonComponent = React.createClass({ getDragonKillingSword: function(){ //送宝刀 }, render: function(){ return (<button onClick={this.getDragonKillingSword}>屠龙宝刀,点击就送</button>); } });
这样就实现内部事件的响应了,那如果需要暴露接口怎么办呢?
事实上现在getDragonKillingSword
已经是一个接口了,如果有一个父组件,想要调用这个接口怎么办呢?
父组件大概长这样:
var ImDaddyComponent = React.createClass({ render: function(){ return ( <div> //其他组件 <ButtonComponent /> //其他组件 </div> ); } });
那么如果想手动调用组件的方法,首先在ButtonComponent上设置一个ref=""
属性来标记一下,比如这里把子组件设置成<ButtonComponent ref="getSwordButton"/>
,那么在父组件的逻辑里,就可以在父组件自己的方法中通过这种方式来调用接口方法:
this.refs.getSwordButton.getDragonKillingSword();
看起来屌屌哒~那么问题又来了,父组件希望自己能够按钮点击时调用的方法,那该怎么办呢?
父组件可以直接将需要执行的函数传递给子组件:
<ButtonComponent clickCallback={this.getSwordButtonClickCallback}/>
然后在子组件中调用父组件方法:
var ButtonComponent = React.createClass({ render: function(){ return (<button onClick={this.props.clickCallback}>屠龙宝刀,点击就送</button>); } });
子组件通过this.props
能够获取在父组件创建子组件时传入的任何参数,因此this.props
也常被当做配置参数来使用
屠龙宝刀每个人只能领取一把,按钮点击一下就应该灰掉,应当在子组件中增加一个是否点击过的状态,这又应当处理呢?
在React中,每个组件都有自己的状态,可以在自身的方法中通过this.state
取到,而初始状态则通过getInitialState()
方法来定义,比如这个屠龙宝刀按钮组件,它的初始状态应该是没有点击过,所以getInitialState
方法里面应当定义初始状态clicked: false
。而在点击执行的方法中,应当修改这个状态值为click: true
:
var ButtonComponent = React.createClass({ getInitialState: function(){ //确定初始状态 return { clicked: false }; }, getDragonKillingSword: function(){ //送宝刀 //修改点击状态 this.setState({ clicked: true }); }, render: function(){ return (<button onClick={this.getDragonKillingSword}>屠龙宝刀,点击就送</button>); } });
这样点击状态的维护就完成了,那么render函数中也应当根据状态来维护节点的样式,比如这里将按钮设置为disabled
,那么render函数就要添加相应的判断逻辑:
render: function(){ var clicked = this.state.clicked; if(clicked) return (<button disabled="disabled" onClick={this.getDragonKillingSword}>屠龙宝刀,点击就送</button>); else return (<button onClick={this.getDragonKillingSword}>屠龙宝刀,点击就送</button>); }
这里简单介绍了通过JSX来管理组件的结构和逻辑,事实上React给组件还定义了很多方法,以及组件自身的生命周期,这些都使得组件的逻辑处理更加强大
CSS文件定义了组件的样式,现在的模块加载器通常都能够加载CSS文件,如果不能一般也提供了相应的插件。事实上CSS、图片可以看做是一种资源,因为加载过来后一般不需要做什么处理。
React对这一方面并没有做特别的处理,虽然它提供了Inline Style的方式把CSS写在JSX里面,但估计没有多少人会去尝试,毕竟现在CSS样式已经不再只是简单的CSS文件了,通常都会去用Less、Sass等预处理,然后再用像postcss、myth、autoprefixer、cssmin等等后处理。资源加载一般也就简单粗暴地使用模块加载器完成了
组件依赖的处理一般分为两个部分:组件加载和组件使用
React没有提供相关的组件加载方法,依旧需要通过<script>
标签引入,或者使用模块加载器加载组件的JSX和资源文件。
如果细心,就会发现其实之前已经有使用的例子了,要想在一个组件中使用另外一个组件,比如在ParentComponent
中使用ChildComponent
,就只需要在ParentComponent
的render()
方法中写上<ChildComponent />
就行了,必要的时候还可以传些参数。
到这里就会发现一个问题,React除了只处理了结构和逻辑,资源也不管,依赖也不管。是的,React将近两万行代码,连个模块加载器都没有提供,更与Angularjs,jQuery等不同的是,他还不带啥脚手架...没有Ajax库,没有Promise库,要啥啥没有...
那它为啥这么大?因为它实现了一个虚拟DOM(Virtual DOM)。虚拟DOM是干什么的?这就要从浏览器本身讲起
如我们所知,在浏览器渲染网页的过程中,加载到HTML文档后,会将文档解析并构建DOM树,然后将其与解析CSS生成的CSSOM树一起结合产生爱的结晶——RenderObject树,然后将RenderObject树渲染成页面(当然中间可能会有一些优化,比如RenderLayer树)。这些过程都存在与渲染引擎之中,渲染引擎在浏览器中是于JavaScript引擎(JavaScriptCore也好V8也好)分离开的,但为了方便JS操作DOM结构,渲染引擎会暴露一些接口供JavaScript调用。由于这两块相互分离,通信是需要付出代价的,因此JavaScript调用DOM提供的接口性能不咋地。各种性能优化的最佳实践也都在尽可能的减少DOM操作次数。
而虚拟DOM干了什么?它直接用JavaScript实现了DOM树(大致上)。组件的HTML结构并不会直接生成DOM,而是映射生成虚拟的JavaScript DOM结构,React又通过在这个虚拟DOM上实现了一个 diff 算法找出最小变更,再把这些变更写入实际的DOM中。这个虚拟DOM以JS结构的形式存在,计算性能会比较好,而且由于减少了实际DOM操作次数,性能会有较大提升
道理我都懂,可是为什么我们没有模块加载器?
所以就需要Webpack了
本文只转载了原文的说说react部分,至于webpack部分跟我所用法不一样,所以砍掉了,下面提供原文链接。
原文链接:https://segmentfault.com/a/1190000002767365