• 技术文章 >web前端 >前端问答

    声明react组件的方式有几种

    青灯夜游青灯夜游2021-11-26 17:09:11原创83

    声明react组件的方式有3种:1、利用函数式定义无状态组件;2、利用 “React.createClass()”方法来定义组件;3、利用“React.Component()”方法以ES6的形式来定义组件。

    本教程操作环境:Windows7系统、react17.0.1版、Dell G3电脑。

    react声明(创建)组件的方式:

    React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归;

    具体的三种方式:

    虽然有三种方式可以定义react的组件,那么这三种定义组件方式有什么不同呢?或者说为什么会出现对应的定义方式呢?下面就简单介绍一下。

    无状态函数式组件

    创建无状态函数式组件形式是从React 0.14版本开始出现的。它是为了创建纯展示组件,这种组件只负责根据传入的props来展示,不涉及到要state状态的操作。具体的无状态函数式组件,其官方指出:

    在大部分React代码中,大多数组件被写成无状态的组件,通过简单组合可以构建成其他的组件等;这种通过多个简单然后合并成一个大应用的设计模式被提倡。

    无状态函数式组件形式上表现为一个只带有一个render方法的组件类,通过函数形式或者ES6 arrow function的形式在创建,并且该组件是无state状态的。具体的创建形式如下:

    function HelloComponent(props, /* context */) {
      return <div>Hello {props.name}</div>
    }
    ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)

    无状态组件的创建形式使代码的可读性更好,并且减少了大量冗余的代码,精简至只有一个render方法,大大的增强了编写一个组件的便利,除此之外无状态组件还有以下几个显著的特点:

    无状态组件的创建形式使代码的可读性更好,并且减少了大量冗余的代码,精简至只有一个render方法,大大的增强了编写一个组件的便利,除此之外无状态组件还有以下几个显著的特点:

    无状态组件被鼓励在大型项目中尽可能以简单的写法来分割原本庞大的组件,未来React也会这种面向无状态组件在譬如无意义的检查和内存分配领域进行一系列优化,所以只要有可能,尽量使用无状态组件。

    React.createClass

    React.createClass 是react刚开始推荐的创建组件的方式,这是ES5的原生的JavaScript来实现的React组件,其形式如下:

    var InputControlES5 = React.createClass({
        propTypes: {//定义传入props中的属性各种类型
            initialValue: React.PropTypes.string
        },
        defaultProps: { //组件默认的props对象
            initialValue: ''
        },
        // 设置 initial state
        getInitialState: function() {//组件相关的状态对象
            return {
                text: this.props.initialValue || 'placeholder'
            };
        },
        handleChange: function(event) {
            this.setState({ //this represents react component instance
                text: event.target.value
            });
        },
        render: function() {
            return (
                <div>
                    Type something:
                    <input onChange={this.handleChange} value={this.state.text} />
                </div>
            );
        }
    });
    InputControlES6.propTypes = {
        initialValue: React.PropTypes.string
    };
    InputControlES6.defaultProps = {
        initialValue: ''
    };

    与无状态组件相比,React.createClass和后面要描述的React.Component都是创建有状态的组件,这些组件是要被实例化的,并且可以访问组件的生命周期方法。但是随着React的发展,React.createClass形式自身的问题暴露出来:

    React.Component

    React.Component是以ES6的形式来创建react的组件的,是React目前极为推荐的创建有状态组件的方式,最终会取代React.createClass形式;相对于 React.createClass可以更好实现代码复用。将上面React.createClass的形式改为React.Component形式如下:

    class InputControlES6 extends React.Component {
        constructor(props) {
            super(props);
    
            // 设置 initial state
            this.state = {
                text: props.initialValue || 'placeholder'
            };
    
            // ES6 类中函数必须手动绑定
            this.handleChange = this.handleChange.bind(this);
        }
    
        handleChange(event) {
            this.setState({
                text: event.target.value
            });
        }
    
        render() {
            return (
                <div>
                    Type something:
                    <input onChange={this.handleChange}
                   value={this.state.text} />
                </div>
            );
        }
    }
    InputControlES6.propTypes = {
        initialValue: React.PropTypes.string
    };
    InputControlES6.defaultProps = {
        initialValue: ''
    };

    推荐学习:《react视频教程

    以上就是声明react组件的方式有几种的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:react 声明组件
    上一篇:react一共有几个hooks 下一篇:react swipe用法是什么
    php中文网线上培训班

    相关文章推荐

    • 深入浅析React Native与web的基本交互(附代码)• Vue3中 ref VS reactive,浅谈它们间有何区别?• vuejs和React是什么• react是什么意思呢• react遍历方法有哪些

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网