React 3 react component 3种写法

react component 3种写法

React组件的写法常见有如下3种:

  1. ES5写法React.createClass

  2. ES6写法React.Component

  3. 无状态的函数式写法(纯组件-SFC)


下面用实例写一个 SwitchButton 组件的例子

ES5写法React.createClass

React.createClass不用多说,我们最早使用这个方法来构建一个组件“类”,它接受一个对象为参数,对象中必须声明一个render方法,render返回一个组件实例。

import React from 'react';
import ReactDOM from 'react-dom';
var SwitchButton = React.createClass({
    getDefaultProp:function() {
        return { open: false }
    },
    getInitialState: function() {
        return { open: this.props.open };
    },
    handleClick: function() {
        this.setState({open: !this.state.open})
    },
    render: function() {
        return (
            <label onClick={this.handleClick}><input type="checkbox" checked = {this.state.open || false} />{this.state.open ? '开启':'关闭'}</label>
        );
    }
});
export default SwitchButton;

ES6-写法 React.Component

import React from 'react';
import ReactDOM from 'react-dom';
class SwitchButton extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            open: this.props.open
        }
    }

    handleClick() {
        this.setState({open: !this.state.open})
    }

    render() {
        return (
            <label onClick={this.handleClick.bind(this)}><input type="checkbox" checked = {this.state.open || false} />{this.state.open ? '开启':'关闭'}</label>
        );
    }
};
SwitchButton.defaultProps = {
 open: false
}
export default SwitchButton;

React.createClass 与 React.Component区别

  • 组件初始状态state的配置不同

    React.createClass创建的组件,其状态state是通过getInitialState方法来配置组件相关的状态;

    React.Component创建的组件,其状态state是在constructor中像初始化组件属性一样声明的。

  • 函数this自绑定

    React.createClass创建的组件,其每一个成员函数的this都有React自动绑定,任何时候使用,直接使用this.method即可,函数中的this会被正确设置。

    const Contacts = React.createClass({  
        handleClick() {
            console.log(this); // React Component instance
        },
        render() {
            return (
                <div onClick={this.handleClick}></div>
            );
        }
    });

    React.Component创建的组件,其成员函数不会自动绑定this,需要开发者手动绑定,否则this不能获取当前组件实例对象。

    constContacts extends React.Component {  
        handleClick() {
            console.log(this); // null
        },
        render() {
            return (
                <div onClick={this.handleClick}></div>
            );
        }
    };

    React.Component 3种手动绑定this的方法:

    1. 在构造函数中完成绑定

    2. 调用时使用method.bind(this)

    3. 使用arrow function来绑定

    //在构造函数中完成绑定 
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this); //构造函数中绑定
    }
    
    //调用时使用method.bind(this)
    <div onClick={this.handleClick.bind(this)}></div> 
    
    //使用arrow function来绑定
    <div onClick={() => this.handleClick()}></div> 

无状态的函数式写法(纯组件-SFC)

因为随着应用复杂度不断提升和组件本数量的增加,组件按各自职责被分成不同的类型,于是有一种只负责展示的纯组件出现了,它的特点是不需要管理状态state,数据直接通过props传入,这也符合 React 单向数据流的思想。

无状态组件一般会搭配高阶组件(简称:OHC)一起使用,高阶组件用来托管state,Redux 框架就是通过 store管理数据源和所有状态,其中所有负责展示的组件都使用无状态函数式的写法。

这种模式被鼓励在大型项目中尽可能以简单的写法 来分割原本庞大的组件,而未来 React 也会面向这种无状态的组件进行一些专门的优化,比如避免无意义的检查或内存分配。所以建议大家尽可能在项目中使用无状态组件。

简单的demo

    const Todo = (props) => (
        return (
            <li onClick={props.onClick} style={{textDecoration: props.complete ? "line-through" : "none"}}>
                {props.text}
            </li>
        )
    )

无状态组件的特点:

  1. 组件不会被实例化,整体渲染性能得到提升

    因为组件被精简成一个render方法的函数来实现的,由于是无状态组件,所以无状态组件就不会在有组件实例化的过程,无实例化过程也就不需要分配多余的内存,从而性能得到一定的提升。

  2. 组件不能访问this对象

    无状态组件由于没有实例化过程,所以无法访问组件this中的对象,例如:this.ref、this.state等均不能访问。若想访问就不能使用这种形式来创建组件

  3. 组件无法访问生命周期的方法

    因为无状态组件是不需要组件生命周期管理和状态管理,所以底层实现这种形式的组件时是不会实现组件的生命周期方法。所以无状态组件是不能参与组件的各个生命周期管理的。

  4. 无状态组件只能访问输入的props,同样的props会得到同样的渲染结果,不会有副作用


如何选择哪种方式创建组件

  • 能用React.Component创建的组件的就尽量不用React.createClass形式创建组件。

  • 除此之外,创建组件的形式选择还应该根据下面来决定:

    1、只要有可能,尽量使用无状态组件创建形式。

    2、否则(如需要state、生命周期方法等),使用React.Component这种es6形式创建组件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值