ReactJS2 - Component(组件)

React与其他最大的不同就是组件化和虚拟DOM,组件化的优点就在于增强代码的重复使用,减少代码冗余。虚拟DOM则帮助加速网页加载速度。

创建Component

  • 方法1:

    使用createReactClass()函数创建component,具体的语法为:var comp = createReactClass({});,如:React.createElement("h1", {}, "Hello World");

    在这行代码创建了一个,一个标签为h1,内容为Hello World的元素,{}代表的是元素可有的属性。

    具体渲染组件的方法如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import React from 'react';
    import createReactClass from 'create-react-class';

    var comp = createReactClass({
    render: function() {
    return React.createElement("h1", {}, "Hello World");
    }
    });

    export default comp;

    渲染之后,组件comp就可以被其他的程序/文件所使用。

  • 方法2:

    推荐使用extends React.Component去创建组件,这是在SE6之后有的语法,具体如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    import React from 'react';

    class Comp extends React.Component {
    render() {
    return React.createElement("h1", {}, "Hello World");
    }
    }

    export default Comp;

    以上代码中:

    • Comp是组建的名称;
    • render()将会渲染组件的元素;
    • React.createElement用JavaScript的语法去创建一个新的元素;
    • export default Comp导出组件Comp

使用组件

组建创建完成之后,就需要使用该组件,并在具体的页面之中展示这个组件了,而ReactDOM.render()函数就是用来在具体页面之中渲染组件。ReactDOM.render()的语法为:ReactDOM.render(<parameter 1 />, parameter 2);

  • ReactDOM.render接收两个变量
    • parameter 1是需要被渲染的组件的名称;
    • parameter 2是HTML节点的引用,是该组件要被渲染的具体位置。

完整代码

使用npx create-react-app react-demo的文件夹的结构如下:

1
2
3
4
5
6
7
8
|-react-demo
| |-node_modules
| | |-index.html
| |-public
| |-src
| | |-Comp.js
| | |-index.js
| |-...

index.html

index.html中的引用名为root.

Comp.js

Comp.js的代码如下:

1
2
3
4
5
6
7
8
9
import React from 'react';

class Comp extends React.Component {
render() {
return React.createElement("h1", {}, "Hello World");
}
}

export default Comp;

index.js

index.js的代码如下:

1
2
3
4
5
import React from 'react';
import ReactDOM from 'react-dom';
import Comp from './Comp.js';

ReactDOM.render(<Comp />, document.getElementById('root'));

渲染后的页面

-------The end of this article  Thank you for your reading-------
0%