• 技术文章 >web前端 >js教程

    react组件几种声明方式是什么

    coldplay.xixicoldplay.xixi2020-11-20 09:33:01原创38

    react组件的声明方式:1、函数式定义的无状态组件;2、es5原生方式【React.createClass】定义的组件;3、es6形式的【extends React.Component】定义的组件。

    react组件的声明方式:

    1、无状态函数式组件

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

    在大部分React代码中,大多数组件被写成无状态的组件,通过简单组合可以构建成其他的组件等;

    这种通过多个简单然后合并成一个大应用的设计模式被提倡。

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

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

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

    2、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.createClass会自绑定函数方法(不像React.Component只绑定需要关心的函数)导致不必要的性能开销,增加代码过时的可能性。

    React.createClass的mixins不够自然、直观;React.Component形式非常适合高阶组件(Higher Order Components--HOC),它以更直观的形式展示了比mixins更强大的功能,并且HOC是纯净的JavaScript,不用担心他们会被废弃。HOC可以参考《无状态组件(Stateless Component) 与高阶组件》。

    3、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: ''
    };

    相关学习推荐:javascript视频教程

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

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:react 组件
    上一篇:JavaScript原型实现继承的方法介绍 下一篇:jquery $是什么用法
    第14期线上培训班

    相关文章推荐

    • react中元素和组件的区别是什么• springboot的四大组件是什么?• vue.js中怎么引入组件• react组件有过哪些性能优化

    全部评论我要评论

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

    PHP中文网