1. 函数定义式的无状态组件
创建纯展示组件,只负责根据传入的props来展示,不涉及state的操作。
无状态函数式组件形式上表现为一个直带有一个render方法的组件类。
function HelloComponent(props){
return <div>Hello {props.name}</div>
}
ReacrDom.render(<HelloComponent name="Sebstian"/>,mountNode)
特点是精简,避免冗余,以及:1.组件不会实例化,整体渲染性能提升
2.组件不能访问this对象
3.组件无法访问生命周期的方法
4.无状态组件只能访问输入的props
2.es5原生方式React.createClass定义的组件
有状态的组件,会被实例化,可以访问组件生命周期。
React,createClass会自绑定函数方法导致不必要的性能开销,增加代码过时的可能性
React.createClass的mixins不够自然,直观。适合高阶组件。
3. es6,React.Component
与上面的区别:
A. React.createClass创建的组件,每个成员函数的this都有React自动绑定,任何时候使用,直接使用this.method即可
React.Component需要开发者手动绑定this(在构造函数完成绑定;调用时使用bind;使用箭头函数)
B. React.createClass在创建组件时,有关组件props的属性类型及组建默认的属性会作为组件实例的属性来配置
React.Component则是作为组建类的属性,也就是所谓的类的静态属性配置的
C. React.createClass创建的组件,其状态state是通过getInitialState方法来配置组件相关的状态
React.Component创建组建是,state是在constructor中像初始化组件属性一样声明的