ReactJS 快速入门 3 高级特性
来源:互联网 发布:linux oracle-01081 编辑:程序博客网 时间:2024/09/21 08:18
ReactJS 快速入门 3 高级特性
一. 容器组件
React元素也可以包含其他的子元素,这意味着响应的React组件是一个 容器组件。比如:
- //JSX
- <EzPanel title="title">
- this is demo content
- </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}/>
JSX有一个很好的特性让我们可以给React元素设置一个JSON对象作为属性包,这个属性 包将按照字段展开为分立的React元素的属性,被称为可展开属性。使用如下 方式在React元素上声明一个可展开属性,其中propbag是一个JSON对象:
- <any {...propbag}/>
比如,前面的示例使用可展开属性的方式改写为:
- //定义属性包
- 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/>,
- document.querySelector("#content"));
如果多个组件的实现代码中有一些公共的部分,那么可以使用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()中传入的原型对象,它们的属性不能同名_。
- ReactJS 快速入门 3 高级特性
- ReactJS 快速入门 1 介绍
- ReactJS 快速入门 2 组件开发
- reactJS入门
- ReactJs入门
- reactJs入门
- ReactJS入门
- ReactJs入门
- Python学习笔记(七):高级特性、函数式编程、模板(快速入门篇)
- Flex 3快速入门: 构建高级用户界面 使用 Repeater 组件
- Flex 3快速入门: 构建高级用户界面 创建项目编辑器
- Flex 3快速入门: 构建高级用户界面 添加拖放支持
- Flex 3快速入门: 构建高级用户界面 使用 Tree 控件
- Flex 3快速入门: 构建高级用户界面 添加拖放支持
- ReactJs入门介绍
- ReactJS入门学习一
- ReactJS入门学习二
- ReactJS入门学习二
- cas server3.5.1使用
- java的内部类和匿名类
- parcelable的使用与seraliezd的使用比较
- 11 Session和数据保持
- JDK中的命令行工具
- ReactJS 快速入门 3 高级特性
- Linux-CentOS XAMPP 开机启动
- hdu1534 Schedule Problem--单源最短路径&差分约束
- 角色问题析构
- 5 Java基础语法(方法,数组(初级))
- 四棱柱的体积表面积
- 【剑指 offer】(48)—— 不能被继承的类
- 如何通过mount命令挂载存储设备
- java中Date与String的相互转化