组件 component

1. 模块和组件的区别

这里可以直接找 ChatGPT 给的答案。

1-1 模块

模块是指一个独立的代码文件（通常是 .js 或 .jsx 文件），用于封装代码，使其可以在多个地方复用。在 JavaScript 和 React 开发中，模块通常用于组织代码，使其更易维护和管理。

特点

✅ 可以包含 组件、函数、变量、常量、类、工具函数 等。

✅ 通过 export 导出，其他文件可以 import 进来使用。

✅ 主要用于 代码复用 和 模块化开发。

🔹 总结：模块并不一定是 React 组件，它可以是任何代码片段，比如工具函数、API 请求封装、样式文件等。

1-2 组件

组件是 React 应用的基本构建块，本质上是一个 返回 UI 结构（JSX） 的函数或类。

它可以是 函数组件 或 类组件，并且可以接收 props 作为参数。

组件的特点

✅ 必须返回 JSX 结构（HTML 结构）。

✅ 可以拥有状态（State），并在组件内部管理数据。

✅ 可以嵌套其他组件，实现模块化 UI 结构。

✅ 可以导入导出，但本质上是 UI 组件，而不是普通的 JavaScript 代码块。

❓首先问一下，模块和组件的区别是什么？

模块 → 一个 JS 文件

组件 → 更加细分代码+资源（html+css+js+img..）实现组件复用。

函数组件
return 一个 jsx 对象（虚拟 DOM）
有 Hooks 实现类似于生命周期的感觉
类组件
必须继承 React.component
必须实现render()组件
有自己的生命周期

2. 函数组件

Q：什么是函数组件呢？

只要你写一个函数，并且这个函数返回的是一个虚拟 DOM 对象（JSX 视图），那么你这个函数组件就是函数组件。

基本写法

你可以怎么调用呢？

单闭合调用
... 双闭合调用

组件的名字，我们一般都采用 PascalCase「大驼峰命名法」这种方式命名

这里的函数这样直接进行渲染写不行

ReactDOM.render(MyComponent, document.getElementById('test'));

开头小写&没有结束标签也不行

ReactDOM.render(<myComponent>,document.getElementById('test'))

这个函数本质就是创建了一个对象。可以用 bable，验证。函数名就是组件名。

babel 官网编译在线转换

//1.创建函数式组件  
function MyComponent() {  
  console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式【这里只是不懂的话，建议看一下严格模式下JS的表现】  
  return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>;  
}  
//2.渲染组件到页面  
ReactDOM.render(<MyComponent />, document.getElementById('test'));  
/*   
    执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？  
    1.React解析组件标签，找到了MyComponent组件。  
    2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。  
*/

3. 类组件

类名就是组件名

类必须要继承React.Component才能成为一个组件
必须要写render()
render()必须要有返回值

class MyComponent extends React.Component {  
  render() {  
    return <h2>1(适用于【复杂组件】的定义)</h2>;  
  }  
}

//1.创建类式组件  
class MyComponent extends React.Component {  
  render() {  
    //render是放在哪里的？—— MyComponent的原型对象上，供实例使用。  
    //render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。  
    console.log('render中的this:', this);  
    return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>;  
  }  
}  
//2.渲染组件到页面  
ReactDOM.render(<MyComponent />, document.getElementById('test'));  
/*   
    执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？  
        1.React解析组件标签，找到了MyComponent组件。  
        2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。  
        3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。  
*/

为什么没有实例调用render()，却能执行？

因为和上面一样，找到了组件名(<MyComponent/>)之后 → 随后 React 帮你 new 出来了该类的实例，并通过该实例调用到原型上的render()方法。

如果你的组件有状态，那么就是复杂组件，没有就是简单组件。

人的状态影响行为

组件的状态驱动页面

类组件，也就是复杂组件才有状态，类有属性，实例化之后，才有状态。

划分标准

组件有各种划分

类组件 PK 函数组件。。反正就是按照不同分类标准其实就有各种组件。本身组件没有太大区别。

生命周期在类组件很有用，但是随着 Hooks 出来，可能用处不大哦。

还没写完。。。

【跟着ChatGPT学React】关于组件