5. React中的组件：组件是什么；React定义组件

组件是什么
React定义组件

组件是什么

概念：一个组件就是用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以互相嵌套，也可以复用多次。

React定义组件

在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI，渲染组件只需要把组件当成标签书写即可。

使用过程：

定义组件

javascript 复制代码

function Button() {
    // 组件逻辑 OR 业务逻辑

    // 组件UI渲染
    return (
        <button>组件按钮</button>
    );
}

调用组件 ：有两种方式，一种是自闭合 ，一种是成对标签

javascript 复制代码

function App3() {
    return (
        <div className="App">
            这是 App3.js<br/>
            {/* 2. 调用组件 */}

            {/* 自闭合的方式调用组件 */}
            <Button/><br/>

            {/* 成对标签的方式调用组件 */}
            <Button></Button><br/>
        </div>
    );
}

export default App3;

完整代码如下：

javascript 复制代码

// React 组件的调用

// 1. 定义组件
function Button() {
    // 组件逻辑 OR 业务逻辑

    // 组件UI渲染
    return (
        <button>组件按钮</button>
    );
}

function App3() {
    return (
        <div className="App">
            这是 App3.js<br/>
            {/* 2. 调用组件 */}

            {/* 自闭合的方式调用组件 */}
            <Button/><br/>

            {/* 成对标签的方式调用组件 */}
            <Button></Button><br/>
        </div>
    );
}

export default App3;
// React 组件的调用

// 1. 定义组件
function Button() {
    // 组件逻辑 OR 业务逻辑

    // 组件UI渲染
    return (
        <button>组件按钮</button>
    );
}

function App3() {
    return (
        <div className="App">
            这是 App3.js<br/>
            {/* 2. 调用组件 */}

            {/* 自闭合的方式调用组件 */}
            <Button/><br/>

            {/* 成对标签的方式调用组件 */}
            <Button></Button><br/>
        </div>
    );
}

export default App3;