React文档(十九)不使用ES6
通常你会将一个React组件定义成一个普通的js类:
class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
如果你不打算使用ES6,你也可以使用create-react-class 模块:
var createReactClass = require('create-react-class');
var Greeting = createReactClass({
render: function() {
return <h1>Hello, {this.props.name}</h1>;
}
});
声明defaultProps
class Greeting extends React.Component {
// ...
} Greeting.defaultProps = {
name: 'Mary'
};
var Greeting = createReactClass({
getDefaultProps: function() {
return {
name: 'Mary'
};
},
// ...
});
设置初始state
在ES6类中,你可以在构造函数中通过this.state定义初始state:
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
}
// ...
}
var Counter = createReactClass({
getInitialState: function() {
return {count: this.props.initialCount};
},
// ...
});
自动绑定
class SayHello extends React.Component {
constructor(props) {
super(props);
this.state = {message: 'Hello!'};
// This line is important!
this.handleClick = this.handleClick.bind(this);
} handleClick() {
alert(this.state.message);
} render() {
// Because `this.handleClick` is bound, we can use it as an event handler.
return (
<button onClick={this.handleClick}>
Say hello
</button>
);
}
}
var SayHello = createReactClass({
getInitialState: function() {
return {message: 'Hello!'};
}, handleClick: function() {
alert(this.state.message);
}, render: function() {
return (
<button onClick={this.handleClick}>
Say hello
</button>
);
}
});
这就意味着如果使用ES6类的语法将会为了事件处理器写更多的代码,但是优势就是在大型应用中性能稍微好一点。
class SayHello extends React.Component {
constructor(props) {
super(props);
this.state = {message: 'Hello!'};
}
// WARNING: this syntax is experimental!
// Using an arrow here binds the method:
handleClick = () => {
alert(this.state.message);
} render() {
return (
<button onClick={this.handleClick}>
Say hello
</button>
);
}
}
为了保险起见,以下三种做法都是可以的:
- 在构造函数中绑定方法
- 使用箭头函数,例如onClick={(e) => this.handleClick(e)}
- 使用React.createClass()
mixins(混入)
注意:
有些时候那些不同的组件也许会分享一些相同的功能。它们有时被叫做横切关注点。针对这个问题,在使用 createReactClass 创建 React 组件的时候,引入混入功能会是一个很好的解决方案。
一个常见的使用场景就是一个组件想要通过一个interval定时器来更新自己。使用setInterval()会很方便,但是在你不需要的时候你要关闭定时器来节省内存。React提供了生命周期方法让你知道什么时候组件被创建和被销毁。让我们创建一个简单的mixins使用这些方法来提供一个简单的setInterval()函数来自动清除定时器当你的组件被销毁。
var SetIntervalMixin = {
componentWillMount: function() {
this.intervals = [];
},
setInterval: function() {
this.intervals.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function() {
this.intervals.forEach(clearInterval);
}
}; var createReactClass = require('create-react-class'); var TickTock = createReactClass({
mixins: [SetIntervalMixin], // 使用混入
getInitialState: function() {
return {seconds: 0};
},
componentDidMount: function() {
this.setInterval(this.tick, 1000); // 调用混入的方法
},
tick: function() {
this.setState({seconds: this.state.seconds + 1});
},
render: function() {
return (
<p>
React has been running for {this.state.seconds} seconds.
</p>
);
}
}); ReactDOM.render(
<TickTock />,
document.getElementById('example')
);
如果一个组件有多个混入,且其中几个混入中定义了相同的生命周期方法(比如都会在组件被摧毁的时候执行),那么这些生命周期方法是一定会被调用的。通过混入定义的方法,执行顺序也与定义时的顺序一致,且会在组件上的方法执行之后再执行。
React文档(十九)不使用ES6的更多相关文章
- React文档(九)list和key
首先,我们回顾一下在js里如何转换数组. 给出下面的代码,我们使用map()函数来获取一个数组的numbers然后将值变成两倍大.我们分配新数组由map()返回: const numbers = [1 ...
- React文档(十三)思考React
在我们的看来,React是使用js创建大型快速网站应用的首要方法.它在Facebook和Instagram的使用已经为我们展现了它自己. React的一个很好的地方就在于当你创建应用的时候它使你思考如 ...
- React文档(二十四)高阶组件
高阶组件(HOC)是React里的高级技术为了应对重用组件的逻辑.HOCs本质上不是React API的一部分.它是从React的组合性质中显露出来的模式. 具体来说,一个高阶组件就是一个获取一个组件 ...
- React文档(一)安装
React是一个灵活的可以用于各种不同项目的框架,你可以用它来写新应用,你也可以逐步将它引进已有的代码库而不用重写整个项目. 试用React 如果你想玩一玩React,那么就去CodePen上试一试. ...
- react文档demo实现输入展示搜索结果列表
文档页面地址:https://doc.react-china.org/docs/thinking-in-react.html 该文档只给了具体实现思路,下面是我实现的代码. 初学react,如果有写的 ...
- React文档(十八)最佳性能
在内部,React使用好几种聪明的技巧去最小化更新UI所需要的DOM操作.对于很多应用来说,使用React会使得构建用户界面非常之快而且不需要做太多专门的性能优化.虽然如此,还是有一些方法可以让你为R ...
- React文档(十六)refs和DOM
Refs 提供了一种方式,用于访问在 render 方法中创建的 DOM 节点或 React 元素. 在标准的React数据流中,props是使得父组件和子组件之间交互的唯一方式.你通过props重新 ...
- React文档(十四)深入JSX
根本上,JSX只是为React.createElement(component, props, ...children)函数提供语法糖.JSX代码是这样的: <MyButton color=&q ...
- React文档(十)表单
HTML表单元素和 React里的其他DOM元素有些不同,因为它们会保留一些内部的状态.举个例子,这个普通的表单接受唯一的name值: <form> <label> Name: ...
随机推荐
- 【转】jenkins自动化部署项目7 -- 新建job(将服务代码部署在windows上)
关于构建结束后jenkins会kill所有衍生子进程的官方解决方案:https://wiki.jenkins.io/display/JENKINS/Spawning+processes+from+bu ...
- 用Nuget部署程序包
用Nuget部署程序包 Nuget是.NET程序包管理工具(类似linux下的npm等),程序员可直接用简单的命令行(或VS)下载包.好处: (1)避免类库版本不一致带来的问题.GitHub是管理源代 ...
- 从Node到Go的心路之旅
我最近将一个系统从Node重构到了Go,花了大概两周多的时间,这个过程也是不得已而为之,因为公司开发的系统最终需要部署到客户的服务器,而又不想暴露源码. 但是NodeJs开发的系统却无法从根本上来保护 ...
- Centos7上安装、破解bamboo6.0.3
1.下载bamboo安装包,地址:https://www.atlassian.com/software/bamboo/download?_ga=2.65378349.245489969.1512876 ...
- CCF CSP 201312-1 出现次数最多的数
题目链接:http://118.190.20.162/view.page?gpid=T5 问题描述 试题编号: 201312-1 试题名称: 出现次数最多的数 时间限制: 1.0s 内存限制: 256 ...
- DB2数据库常用的函数
1.value函数 语法value(表达式1,表达式2)value函数是用返回一个非空的值,当其第一个参数非空,直接返回该参数的值,如果第一个参数为空,则返回第一个参数的值. eg:表示如果T1.ID ...
- 微信小程序组件通信
父子通信 在子组件的对应js中 properties:{ prop名字:数据类型, prop名字:{ type:数据类型, value:默认值 } } 在父组件的wxml模板中找到子组件标签 < ...
- hdu1172(枚举)
中文题,题意就不解释了. 思路:因为答案一定是四位数,所以只要枚举1000-9999,如果符合所有条件,那么保存一下答案,记录一下答案的个数,如果答案是唯一的,那么输出它,否则,就不确定. 代码如下: ...
- MySQL ERROR 1698 (28000): Access denied for user 'root'@'localhost'
今天在安装MySQL的过程中竟然没有让我输入密码,登录的时候也不需要密码就能进入,这让我很困惑. 进了数据库就设置密码,用了各种方式都不行. 虽然我这数据库没啥东西但也不能没有密码就裸奔啊,有点丢人是 ...
- 翻译 | Placing Search in Context The Concept Revisited
翻译 | Placing Search in Context The Concept Revisited 原文 摘要 [1] Keyword-based search engines are in w ...