React.createClass和extends Component的区别

前端之家收集整理的这篇文章主要介绍了React.createClass和extends Component的区别前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

createClass本质上是一个工厂函数,extends的方式更加接近最新的ES6规范的class写法。两种方式在语法上的差别主要体现在方法的定义和静态属性的声明上。createClass方式的方法定义使用逗号,隔开,因为creatClass本质上是一个函数,传递给它的是一个Object;而class的方式定义方法时务必谨记不要使用逗号隔开,这是ES6 class的语法规范。

React.createClass和extends Component的区别主要在于:

  1. 语法区别

  2. propType 和 getDefaultProps

  3. 状态的区别

  4. this区别

  5. Mixins

语法区别

React.createClass

  1. import React from 'react';
  2.  
  3. const Contacts = React.createClass({
  4. render() {
  5. return (
  6. <div></div>
  7. );
  8. }
  9. });
  10.  
  11. export default Contacts;

React.Component

  1. import React from 'react';
  2.  
  3. class Contacts extends React.Component {
  4. constructor(props) {
  5. super(props);
  6. }
  7. render() {
  8. return (
  9. <div></div>
  10. );
  11. }
  12. }
  13.  
  14. export default Contacts;

后一种方法使用ES6的语法,用constructor构造器来构造默认的属性和状态。

propType 和 getDefaultProps

React.createClass:通过proTypes对象和getDefaultProps()方法来设置和获取props.

  1. import React from 'react';
  2.  
  3. const Contacts = React.createClass({
  4. propTypes: {
  5. name: React.PropTypes.string
  6. },getDefaultProps() {
  7. return {
  8.  
  9. };
  10. },render() {
  11. return (
  12. <div></div>
  13. );
  14. }
  15. });
  16.  
  17. export default Contacts;

React.Component:通过设置两个属性propTypesdefaultProps

  1. import React form 'react';
  2. class TodoItem extends React.Component{
  3. static propTypes = { // as static property
  4. name: React.PropTypes.string
  5. };
  6. static defaultProps = { // as static property
  7. name: ''
  8. };
  9. constructor(props){
  10. super(props)
  11. }
  12. render(){
  13. return <div></div>
  14. }
  15. }

状态的区别

React.createClass:通过getInitialState()方法返回一个包含初始值的对象

  1. import React from 'react';
  2. let TodoItem = React.createClass({
  3. // return an object
  4. getInitialState(){
  5. return {
  6. isEditing: false
  7. }
  8. }
  9. render(){
  10. return <div></div>
  11. }
  12. })

React.Component:通过constructor设置初始状态

  1. import React from 'react';
  2. class TodoItem extends React.Component{
  3. constructor(props){
  4. super(props);
  5. this.state = { // define this.state in constructor
  6. isEditing: false
  7. }
  8. }
  9. render(){
  10. return <div></div>
  11. }
  12. }

this区别

React.createClass:会正确绑定this

  1. import React from 'react';
  2.  
  3. const Contacts = React.createClass({
  4. handleClick() {
  5. console.log(this); // React Component instance
  6. },render() {
  7. return (
  8. <div onClick={this.handleClick}></div>//会切换到正确的this上下文
  9. );
  10. }
  11. });
  12.  
  13. export default Contacts;

React.Component:由于使用了 ES6,这里会有些微不同,属性并不会自动绑定到 React 类的实例上。

  1. import React from 'react';
  2. class TodoItem extends React.Component{
  3. constructor(props){
  4. super(props);
  5. }
  6. handleClick(){
  7. console.log(this); // null
  8. }
  9. handleFocus(){ // manually bind this
  10. console.log(this); // React Component Instance
  11. }
  12. handleBlur: ()=>{ // use arrow function
  13. console.log(this); // React Component Instance
  14. }
  15. render(){
  16. return <input onClick={this.handleClick}
  17. onFocus={this.handleFocus.bind(this)}
  18. onBlur={this.handleBlur}/>
  19. }
  20. }

我们还可以在 constructor 中来改变 this.handleClick 执行的上下文,这应该是相对上面一种来说更好的办法,万一我们需要改变语法结构,这种方式完全不需要去改动 JSX 的部分:

  1. import React from 'react';
  2.  
  3. class Contacts extends React.Component {
  4. constructor(props) {
  5. super(props);
  6. this.handleClick = this.handleClick.bind(this);
  7. }
  8. handleClick() {
  9. console.log(this); // React Component instance
  10. }
  11. render() {
  12. return (
  13. <div onClick={this.handleClick}></div>
  14. );
  15. }
  16. }
  17.  
  18. export default Contacts;

Mixins

如果我们使用 ES6 的方式来创建组件,那么 React mixins 的特性将不能被使用了。

React.createClass:使用 React.createClass 的话,我们可以在创建组件时添加一个叫做 mixins 属性,并将可供混合的类的集合以数组的形式赋给 mixins

  1. import React from 'react';
  2. let MyMixin = {
  3. doSomething(){}
  4. }
  5. let TodoItem = React.createClass({
  6. mixins: [MyMixin],// add mixin
  7. render(){
  8. return <div></div>
  9. }
  10. })

参考文章1
参考文章2
参考文章3

猜你在找的React相关文章