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

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

• 组件是什么
• React定义组件

组件是什么

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

React定义组件

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

使用过程：

1. 定义组件

   function Button() {
       // 组件逻辑 OR 业务逻辑
   
       // 组件UI渲染
       return (
           <button>组件按钮</button>
       );
   }

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

   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;
// 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;