我们从相关的知识知道,在React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归;具体的三种方式:
下面就简单介绍一下这三种定义组件方式有什么不同或者说为什么说会出现对应的定义方式。
创建纯展示组件,只负责根据传入的props来展示,不涉及到要state状态的操作,是一个只带有一个render方法的组件类
创建形式如下:
<div id="example"></div>
<script type="text/babel">
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
function WelcomeDialog() {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
Welcome
</h1>
<p className="Dialog-message">
Thank you for visiting our spacecraft!
</p>
</FancyBorder>
);
}
ReactDOM.render(
<WelcomeDialog />,
document.getElementById('example')
);
</script>
特点:
无状态组件使得代码结构更加清晰,减少代码冗余,在开发过程中,尽量使用无状态组件
`React.createClass`是react刚开始推荐的创建组件的方式,这是ES5的原生的JavaScript来实现的React组件,其形式如下:
是ES5的原生的JavaScript来实现的React组件
该例子实现了一个交互列表,用户输入信息,按回车后触发键盘事件将获取到的输入值渲染生成列表项,输入信息的数量可以是任意多个。
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('example')
);
特点:
ps:React 版本16以后,React.createClass({})创建组件的方式失效。
React.Component是以ES6的形式来创建react的组件的,是React目前极为推荐的创建有状态组件的方式,最终会取代React.createClass形式;相对于 React.createClass可以更好实现代码复用。
class Contacts extends React.Component {
constructor(props) {
super(props);
}
handleClick() {
console.log(this); // null
}
render() {
return ( <div onClick={this.handleClick}></div> );
}
React.createClass创建的组件,其每一个成员函数的this都有React自动绑定,任何时候使用,直接使用this.method即可,函数中的this会被正确设置
React.Component创建的组件,其成员函数不会自动绑定this,需要手动绑定,否则this不能获取当前组件实例对象
React.Component三种手动绑定this的方法
constructor(props) { super(props); this.Enter = this.Enter.bind(this); }
<div onKeyUp={this.Enter.bind(this)}></div>
<div onKeyUp={(event)=>this.Enter(event)}></div>
我们在实际应用中应该选择哪种方法来创建组件呢?
本文地址:https://blog.csdn.net/qishuixian/article/details/85984403
如对本文有疑问, 点击进行留言回复!!
关于在IDEA中SpringBoot项目中activiti工作流的使用详解
视频编辑工具ACDSee Luxea Video Editor安装及激活图文教程
java spring整合junit操作(有详细的分析过程)
网友评论