React之组件

项目开发组件化已经是目前前端主流技术的一个发展方向了。当你在学习一个新的框架时,组件必是其最基础,也是其最重要的一部分。本篇文章主要介绍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组件的子组件。以上实例也可以看到父组件向子组件进行传值的一个过程。 先到这吧!未完,待续!

原文发布于微信公众号 - 张培跃(zhangpeiyue8)

原文发表时间:2018-08-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券