react开发入门教程第二篇---组件定义三种方式

组件定义的三种方式

创建形式如下：

无状态函数式组件
function App(props) {//props  Sebastian
  return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)
特点：组件不会被实例化，整体渲染性能得到提升。组件不能访问this对象。组件无法访问生命周期的方法 。无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用。

React.createClass

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

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

React.createClass，这些组件是要被实例化的，并且可以访问组件的生命周期方法。

React.createClass特点：

绑定函数方法导致不必要的性能开销，增加代码过时的可能性。
React.createClass的mixins不够自然、直观

React.Component

React.Component是以ES6的形式来创建react的组件的(react推荐当前方式)

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {// 设置 initial state
            text: ''
        };

        this.handleChange = this.handleChange.bind(this);//绑定this，否则在事件中this指向null
    }

    handleChange(event) {
        this.setState({
            text: event.target.value
        });
    }

    render() {
        return (
            <div>
                <input onChange={this.handleChange} value={this.state.text} />
            </div>
        );
    }
}

1.this

React.createClass与React.Component区别

React.createClass创建的组件，直接使用this.method即可.

React.Component创建的组件，this不能获取当前组件实例对象，(可以在调用时使用method.bind(this)来完成绑定.)

2.组件属性类型propTypes及其默认props属性defaultProps配置不同

React.createClass：作为组件实例的属性

React.Component：作为组件类的属性，所谓的类的静态属性。

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

React.createClass其状态state是通过getInitialState方法来配置组件相关的状态；
React.Component其状态state是在constructor中像初始化组件属性一样声明的。

无状态组件内部是可以使用ref功能的，可以将ref内容保存到无状态组件内部的一个本地变量中。

react开发入门教程第二篇---组件定义三种方式

组件定义的三种方式

猜你喜欢