5. 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;