项目开发组件化已经是目前前端主流技术的一个发展方向了。当你在学习一个新的框架时，组件必是其最基础，也是其最重要的一部分。本篇文章主要介绍React当中的组件如何编写 ！从而达到让我们开发的项目更容易来管理的目的！
React组件你可以把它看作是一个带有props属性集合和state状态集合并且构造出一个虚拟DOM结构的对象。
创建组件
首先我们通过函数来创建一个组件，函数的名字即是组件的名字！另外有两个地方需要特别注意：
- 组件名字的首字母必须要大写，否则会报错！这与HTML元素名的写法是不同的。
- 组件当中只能包含一个顶层标签，否则也会报错！
/* 通过函数来定义一个组件,该函数名即是组件的名字
* 注意起名字的时候第一个字母一定要大写，否则会报错！*/
function MyComponent(){
// 返回的内容即是组件的内容
return <div>此时此刻我想吟诗一首！</div>;
}
然后通过ReactDOM.render()方法将组件渲染到页面中，完整示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react.development.js"></script>
<script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react-dom.development.js"></script>
<script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/babel.min_.js"></script>
</head>
<body>
<div id="wrap"></div>
</body>
<script type="text/babel">
/* 通过函数来定义一个组件,该函数名即是组件的名字
* 注意起名字的时候第一个字母一定要大写，否则会报错！*/
function MyComponent(){
// 返回的内容即是组件的内容
return <div>此时此刻我想吟诗一首！</div>;
}
var element=<MyComponent />;
// 通过ReactDOM.render()方法将组件渲染到页面中
ReactDOM.render(
// 将组件作为DOM元素
element,
document.querySelector("#wrap")
)
</script>
</html>
另外我们也可以通过ES6当中的class来定义组件：
//类名即为组件名，该类需要继承React.Component
class MyComponent extends React.Component {
//render的返回内容即是组件的内容
render() {
return <div>啊，天是那么蓝，地是那么大！好诗啊好诗！</div>;
}
}
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react.development.js"></script>
<script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react-dom.development.js"></script>
<script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/babel.min_.js"></script>
</head>
<body>
<div id="wrap"></div>
</body>
<script type="text/babel">
//类名即为组件名，该类需要继承React.Component
class MyComponent extends React.Component {
//render的返回内容即是组件的内容
render() {
return <div>啊，天是那么蓝，地是那么大！好诗啊好诗！</div>;
}
}
//将类名作为Dom元素的名字，element为自定义的组件
var element=<MyComponent />;
// 通过ReactDOM.render()方法将组件渲染到页面中
ReactDOM.render(
// 将组件作为DOM元素
element,
document.querySelector("#wrap")
)
</script>
</html>
通过props获得组件的属性值
如果要为自己写的组件进行传值，可以通过为该组件添加属性，属性的值即是你要传递的值，然后在你定义组件的函数当中添加props来进行接收。
props是一个对象,组件的所有属性值都会合并到该对象中。需要注意的是：props是只读的，如果你要修改其属性值，会报错！
<script type="text/babel">
//为MyComponent添加props参数。组件的所有属性值都会合并到该参数内
function MyComponent(props) {
//*props是只读的，如果你要修改其属性值，会报错！
//下边这行代码尝试修改props的属性值，会报错
//props.siteName="xixi";
return <div>好神奇！ {props.siteName}!</div>;
}
var element = <MyComponent siteName="zhangpeiyue.com"/>;
ReactDOM.render(
element,
document.querySelector("#wrap")
);
</script>
如果你是通过class来定义的组，直接写this.props即可获得传过来的值。
class MyComponent extends React.Component {
//此处的构造器是可以省略的
constructor(props){
super(props);
}
render() {
return <div>好神奇！ {this.props.siteName}!</div>;
}
}
var element = <MyComponent siteName="zhangpeiyue.com"/>;
ReactDOM.render(
element,
document.querySelector("#wrap")
);
当然如果在构造器当中你没有逻辑代码的话，在上面代码这种情况下，构造器是可以省略不写的。
class MyComponent extends React.Component {
render() {
return <div>好神奇！ {this.props.siteName}!</div>;
}
}
var element = <MyComponent siteName="zhangpeiyue.com"/>;
ReactDOM.render(
element,
document.querySelector("#wrap")
);
复合组件
复合组件，顾名思义，指的是多个组件合成一个组件，合成的组件可以称为复合组件。通过复合组件可以将组件的不同功能进行再次分离。例如：
<script type="text/babel">
//子组件
function SiteName(props) {
return <h1>网站名称：{props.name}</h1>;
}
//子组件
function SiteUrl(props) {
return <h1>网站地址：{props.url}</h1>;
}
//父组件
function MyApp() {
return (
<div>
<SiteName name="张培跃" />
<SiteUrl url="http://www.zhangpeiyue.com" />
</div>
);
}
ReactDOM.render(
<MyApp />,
document.querySelector("#wrap")
);
</script>
以上实例中组件MyApp使用了SiteName组件与SiteUrl组件。也可以称MyApp为SiteName组件与SiteUrl组件的父组件，同理也可以称SiteName组件与SiteUrl组件为MyApp组件的子组件。以上实例也可以看到父组件向子组件进行传值的一个过程。
先到这吧！未完，待续！
网友评论