React高级特性
目录：
- 容器组件
- JSX可展开属性
- 动画 : CSS3 Transition
- 默认属性
- 复用代码：mixin
容器组件
React元素也可以包含其他的子元素，这意味着响应的React组件是一个 容器组件。比如：
//JSX <ezpanel title="title"> <p>this is demo content</p> </ezpanel>
上例中的EzPanel声明了一个面板组件，而面板的内容在定义组件时是不可知的， 这些内容需要被加入到EzPanel渲染后的DOM元素中。
在React中，使用this.props.children就可以访问React子元素，这样我们 就可以轻松地将未知的React子元素包含到容器中：
var EzPanel = React.createClass({ render : function(){ return <div class="ez-panel"> {this.props.children} </div>; } });
JSX可展开属性
在JSX中，有时一个React元素的属性很多，比如在 示例代码 中设置音量推子组件 的属性：
//JSX <div classname="ez-slider" onmousedown="{this.onMouseDown}" onmousemove="{this.onMouseMove}" onmouseup="{this.onMouseUp}"></div>
JSX有一个很好的特性让我们可以给React元素设置一个JSON对象作为属性包，这个属性 包将按照字段展开为分立的React元素的属性，被称为可展开属性。使用如下 方式在React元素上声明一个可展开属性，其中propbag是一个JSON对象：
<any {...propbag}=""></any>
比如，前面的示例使用可展开属性的方式改写为：
//定义属性包 var props = { className : "ez-slider", onMouseDown : this.onMouseDown, onMouseUp : this.onMouseUp, onMouseMove : this.onMouseMove }; //传入属性包 var rel = <div {...props}=""></div>;
动画 : CSS3 Transition
在React中可以使用CSS3 Transition为组件增加过渡效果。不过，由于 CSS3 Transition需要DOM属性的变化才能触发，所以我们需要将属性改变后的React 元素重新渲染到真实DOM上，才可以触发过渡效果。
大致来讲，在React中使用CSS3 Transition有以下步骤：
- 为元素声明transition样式
- 设置属性初始值，第一次渲染元素
- 设置属性目标值，第二次渲染元素
在示例代码中，为了实现过渡效果，我们使用了一个内部状态mounted 来实现第二次渲染：当初次渲染完成功后，通过setState()方法我们触发 了再次渲染。第二次渲染时，我们重新设置了样式，以便激活过渡过程。
需要注意的一点是window.getComputedStyle()方法的应用，调用 这个方法的目的是刷新DOM的样式，以便确保之前设置的样式已经被应用到DOM 上了。
默认属性
对于一个组件来讲，通常应该有一些默认的属性值，这样即使调用者没有 显示的指定某个属性值，依然可以通过this.props获得该值。这简化了属性值 缺失引起的错误检查。
在React中定义组件时，使用getDefaultProps()方法声明默认属性：
var EzDemoComp = React.createClass({ //设置默认属性值 getDefaultProps:function(){ return { value : 0 } }, render: function(){ //使用this.props.value访问属性，如果用户没有设置，则该值为默认值 return <div classname="ez-demo">{this.props.value}</div>; } }); //创建React元素时没有指定属性值 React.render(<ezdemocomp></ezdemocomp>, document.querySelector("#content"));
复用代码：mixin
如果多个组件的实现代码中有一些公共的部分，那么可以使用React的mixin特性 将这部分代码提出来公用。mixin是掺合，混合，糅合的意思，即可以将一个对象的属性 拷贝到另一个对象上。
在React中，使用mixin有两个步骤：
- 定义一个mixin对象
mixin对象是一个JavaScript对象，这个对象的属性将被拷贝到React组件类的原型对象上:
var EzLoggerMixin = { log:function(){ //sth. happened here. } };
- 在定义组件时使用这个mixin对象
在使用React.createClass()定义组件时，给传入的原型对象设置mixins属性：
React.createClass({ mixins:[EzLoggerMixin], render:function(){ //your render stuff. } });
mixins属性是一个数组，这意味着可以指定多个mixin对象，但记住这些 mixin对象、以及在createClass()中传入的原型对象，它们的属性不能同名。
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
