React创建组件的3种写法

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

函数式定义的无状态组件
es5原生方式React.createClass定义的组件
es6形式的extends React.Component定义的组件

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

(1)无状态函数式组件

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

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

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

  

无状态函数式组件,顾名思义,无状态,也就是你无法使用State,也无法使用组件的生命周期方法,这就决定了函数组件都是展示性组件,接收Props,渲染DOM,而不关注其他逻辑。

其实无状态函数式组件也是官方比较推荐的一种方式,尽量让底层的组件变成无状态函数式组件,也即组件尽量只用来显示数据,把数据操作的逻辑都放在顶层,然后从顶层把数据传到底层

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

1、组件不会被实例化,整体渲染性能得到提升
  因为组件被精简成一个render方法的函数来实现的,由于是无状态组件,所以无状态组件就不会在有组件实例化的过程,无实例化过程也就不需要分配多余的内存,从而性能得到一定的提升。
2、组件不能访问this对象
  无状态组件由于没有实例化过程,所以无法访问组件this中的对象,例如:this.ref、this.state等均不能访问。若想访问就不能使用这种形式来创建组件
3、组件无法访问生命周期的方法
  因为无状态组件是不需要组件生命周期管理和状态管理,所以底层实现这种形式的组件时是不会实现组件的生命周期方法。所以无状态组件是不能参与组件的各个生命周期管理的。
4、无状态组件只能访问输入的props,同样的props会得到同样的渲染结果,不会有副作用

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

  

(2)React.createClass

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

  案例代码:

  

  案例2:

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)ES6写法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: ‘‘
};

  

.

原文地址:https://www.cnblogs.com/jianxian/p/12392115.html

时间: 2024-10-08 04:29:17

React创建组件的3种写法的相关文章

react创建组件的三种方式

react创建组件的三种方式: 1.函数式无状态组件 2.es5方式React.createClass组件 3.es6方式extends React.Component 三种创建方式的异同   1.函数式无状态组件 (1)语法 1 function myComponent(props) { 2 return 3 <div>Hello {props.name}</div> 4 } (2)特点 ● 它是为了创建纯展示组件,这种组件只负责根据传入的props来展示,不涉及到state状态

React创建组件的三种方式及区别

React创建组件具体的三种方式: 1.函数式定义的无状态组件 2.es5原生方式React.createClass定义的组件 3.es6形式的extends React.Component定义的组件 虽然有三种方式可以定义React组件,但是它们有什么不同呢?什么情况下应该使用哪种定义方式呢?请继续往下看 接下来我们先说一下三种方式有什么区别? 1.无状态函数式组件 它是为了创建纯展示组件,这种组件只负责根据传入的props来展示,不涉及到要state状态的操作. 无状态函数式组件形式上表现为

react创建组件的几种方式及其区别

react创建组件有如下几种方式 ①.函数式定义的无状态组件 ②.es5原生方式React.createClass定义的组件   ③.es6形式的extends React.Component定义的组件 1.无状态函数式组件 创建无状态函数式组件形式是从React 0.14版本开始出现的.它是为了创建纯展示组件,这种组件只负责根据传入的props来展示,不涉及到要state状态的操作.具体的无状态函数式组件,其官方指出: 在大部分React代码中,大多数组件被写成无状态的组件,通过简单组合可以构

总结 React 组件的三种写法 及最佳实践

React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成. 截至目前 React 已经更新到 v15.4.2,由于 ES6 的普及和不同业务场景的影响,我们会发现目前主要有三种创建 React 组件的写法:1. ES5写法React.createClass,2. ES6写法React.Component,3. 无状态的函数式写法(纯组件-SFC). 你们最钟爱哪种写法呢?萝卜青菜各有所爱~ 每个团队都有自己的代码规范和开发模

React Native创建组件的三种方式

创建组件的三种方式 1.ES6创建组件的方式 export default class HelloComponent extends Component{ render(){ return <Text style={{color: 'red'}}>Hello</Text> } } 2.ES5创建组件的方式 var HelloComponent = React.createClass({ render(){ return <Text style={{color: 'red'}}

在JavaScript中创建命名空间的几种写法

在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺序来的,可以看看下面的例子: var sayHello = function() { return 'Hello var'; }; function sayHello(name) { return 'Hello function'; }; sayHello(); 最终的输出为 > "Hello var" 为什么会这样,根据 StackOverFlow 的解释,实际上JavaScript的是

四、React创建组件、 JSX语法 绑定数据

接:https://www.cnblogs.com/chenxi188/p/11702799.html 用上节建好的my-app项目: my-app/ README.md node_modules/ package.json .gitignore public/ favicon.ico index.html manifest.json src/ App.css App.js App.test.js index.css index.js logo.svg 一.绑定状态数据state 1.在src目

react的组件的两种形式

1.如果需要传参,在函数中加一个props参数来接受,并且必须向外return一个合法的jsx创建的虚拟DOM. //1. 组件名首字母为大写 2. 必须return 合法的jsx// 这里就可以相当于子组件function Hellow (props){ //props为父组件传过来的数据 //如果打印props的话,只要子组件用的到东西都会打印出来,在这里没有用到父组件中的a数据,因此只会打印出前三个来. return <div> 姓名: {props.name}, 性别: {props.

React创建组件的不同方式(ES5 &amp; ES6)

一. 首先缕清楚React.createElement.React.createClass.React.Component之间的关系 1. React.createElement(HTML element) & React.createClass(javascript DOM) >> 使用Javascript DOM创建HTML元素 // 创建lu元素 var ul = document.createElement('ul') // 创建class属性 var listClass =