土豆博客

React之组件的定义方式

# 一、无状态函数式组件(推荐)

使用构造函数形式来创建组件的方式叫做无状态函数式组件,它被用来创建纯展示组件,只负责根据传入的props来展示,不涉及到要state状态的操作,是一个只带有一个render方法的组件类。

1.创建形式如下

//最简单的不带props
function HelloComponent() {
  return <div>Hello React</div>
}
ReactDOM.render(<HelloComponent/>, document.getElementById("app")) 

//带props
function HelloComponent(props) {
  return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="React" />, document.getElementById("app")) 

2.特点

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

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

  • 组件不能访问this对象

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

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

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

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

无状态组件使得代码结构更加清晰,减少代码冗余,在开发过程中,尽量使用无状态组件

# 二、React.createClass(不推荐)

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

import React from 'react';
import {render} from 'react-dom';
const Hello = React.createClass({
    getInitialState:function(){
        return {text:this.props.initialValue || 'placeholder'}
    },
    render:function(){
        return (<div>
                <input type='text' value={this.state.text} />
            </div>)
    }
})

render(<Hello initialValue='aaa' />,document.getElementById('root'))

这种创建组件的方式不够自然、直观,而且React团队已经声明React.createClass最终会被React.Component的类形式所取代,所以现在尽量不要使用这种方式定义组件

# 三、React.Component(推荐)

相对于 React.createClass可以更好实现代码复用,React极力推荐使用React.Component创建组件来取代React.createClass方法创建。是以ES6的形式来创建react的组件的,代码如下

import React from "react";
export default class MyComponents extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 10
    };
  }
  increment() {
    this.setState((state) => ({
      count: (state.count += 1)
    }));
  }
  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.increment.bind(this)}>增加</button>
      </div>
    );
  }
}
# 四、关于this
  • React.createClass创建的组件,其每一个成员函数的this都有React自动绑定,任何时候使用,直接使用this.method即可,函数中的this会被正确设置

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

    (1)在构造函数中绑定

     constructor(props) {
           super(props);
           this.Event = this.Event.bind(this);
      }
    

    (2)使用bind绑定

    <button onClick={this.Event.bind(this)}></button> 
    

    (3)箭头函数绑定

    <button onClick={(event)=>this.Event(event)}></button> 
    
code
top

扫码添加,一起进步

wechat-code

为了保障最佳预览体验,博客已不支持IE浏览器的访问,邀请您使用以下现代高级浏览器。

谷歌浏览器(推荐) 火狐浏览器

注:如果你使用的是360,QQ等双核浏览器,请开启极速模式