您的位置：首页 > Web前端 > React

react学习笔记 item3 --- 组件的创建方式

2016-11-19 15:58 609 查看

前面我们说到了 react 的核心在于组件，可以把实现一定功能或者模块进行封装，然后通过不同的组件之间的组合构成一下完整的项目。下面介绍了一下组件的基本使用方法。

不使用JSX 语法也能创建 react 组件，但是由于react 团队推荐我们使用 JSX，我的上一篇博文中也介绍了 JSX 的优势以及基本的语法。因此这里我简单的介绍一下使用JSX来创建组件的方法。

1、React.createClass

利用React.createClass定义的组件是es5原生方式。需要注意的是：

原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头；

组件类只能包含一个顶层标签，否则也会报错；

对自定义组件实例化时，要保证标签闭合。

下面我们创建一个 HelloMessage 组件，用来展示相关的信息，其形式如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个react程序</title>
<script type="text/javascript" src="lib/react.js"></script>
<script type="text/javascript" src="lib/react-dom.js"></script>
<script type="text/javascript" src="lib/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello World！</h1>;
}
});

ReactDOM.render(
<HelloMessage />,
document.getElementById("example"));

</script>
</body>
</html>

这个示例在上一篇文章中介绍过。在组件实例化的时候也可以给组件传入参数：可以使用 this.props 对象向组件传递参数。例如我们我们给组件传入一个name属性：

var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}！</h1>;
}
});

ReactDOM.render(
<HelloMessage name='sean' />,
document.getElementById("example"));

另外，这种方法创建的组件时可以设置状态，可以通过组件的状态来控制组件的显示效果。如下，我们设置了一个button ，通过点击 button 来实现颜色的变化：

var HelloMessage = React.createClass({
getInitialState: function() {
return { isRed : true };
},
handleClick: function(){
this.setState({isRed : !this.state.isRed});
},
render: function() {
var redStyle = {
color:'red'
};
var blueStyle = {
color:'blue'
};
return (
<div>
<h1 style={this.state.isRed ? redStyle : blueStyle}>Hello {this.props.name}！</h1>
<button onClick={this.handleClick}>点击切换颜色</button>
</div>
);
}
});

ReactDOM.render(
<HelloMessage name='sean' />,
document.getElementById("example"));

更多的关于props 和 state 的使用将在后续的文章介绍。

2、函数式组件

函数式组件是React 0.14版本开始出现的，这中方式创建组件的最大特点就是无状态性。而且简化了很多，只留下了return 部分，这种组件只负责展示，不涉及到要state状态的操作。下面就是一个简单的展示：

function HelloMessage(props){
var redStyle = {
color:'red'
};
return <h1 style={redStyle}>Hello world！</h1>
}

ReactDOM.render(
<HelloMessage />,
document.getElementById("example"));

当然，函数式组件可以根据传入的props来进行相应的内容，如下：

function HelloMessage(props){
return <h1>Hello {props.name}！</h1>
}

ReactDOM.render(
<HelloMessage name='sean' />,
document.getElementById("example"));

这种方法创建的组件无法完成第一种 React.createClass 创建方式中根据状态改变显示效果。但是由于无状态组件，所以无状态组件就不会在有组件实例化的过程，无实例化过程也就不需要分配多余的内存，从而性能得到一定的提升。

3、React.Component

React.Component是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式。由于ES6 的推广，最终React.Component会取代React.createClass形式。将上面React.createClass的形式改为React.Component形式如下：

class HelloMessage extends React.Component {
constructor(props) {
super(props);

this.state = {
isRed : true
};

// ES6 类中函数必须手动绑定
this.handleClick = this.handleClick.bind(this);
}

handleClick(event) {
this.setState({isRed : !this.state.isRed});
}

render() {
var redStyle = {
color:'red'
};
var blueStyle = {
color:'blue'
};
return (
<div>
<h1 style={this.state.isRed ? redStyle : blueStyle}>Hello {this.props.name}！</h1>
<button onClick={this.handleClick}>点击切换颜色</button>
</div>
);
}
}

ReactDOM.render(
<HelloMessage name='sean' />,
document.getElementById("example"));

以上是三种创建react 组件的方式，熟悉ES6 的读者建议使用 ES6 的方式来创建。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： react 组件

相关文章推荐

新的分享

章节导航