参考链接
1.参考链接1
React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归;具体的三种方式:
1)函数式定义的无状态组件(无状态)---- 适合配路由
无状态组件即是纯展示组件,只负责根据传入的props来展示,不涉及到state状态的操作,是一个只带有一个render方法的组件类。
本质上就是一个function,里面只有return,参数只有props,没有state,
特点:
1)只负责显示没有逻辑
2)组件不会被实例化,整体渲染性能得到提升
3)组件不能访问this对象
4)组件无法访问生命周期的方法
5)无状态组件只能访问输入的props,同样的props会得到同样的渲染结果,不会有副作用
eg:
function HelloComponent(props) {
return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="yourName" />, mountNode)
const About = () =>{return(
<div>
<h2>About</h2>
</div>
)}
//简化如下
const About = () => (
<div>
<h2>About</h2>
</div>
)
2)es5原生方式React.createClass定义的组件(有状态)---- 适合绑事件
var React = require("react");
var ReactDOM = require("react-dom");
var Hello = React.createClass({
render(){
return(
<div>
33333333333
</div>
)
}
})
3)es6形式的extends React.Component定义的组件(有状态)--- 适合绑事件
import React from "react";
import ReactDOM from "react-dom";
class Hello extends React.Component{
render(){
return(
<div>
22222
<input text="text" ref="username"/>
<button onClick={this.handleClick.bind(this)}>click</button>
<button onClick={()=>{
console.log(this.refs.username)
}}>clicktwo</button>
</div>
)
}
handleClick(){
console.log(444444444);
console.log(this.refs.username)
}
}