1.函数式组件（简单组件）

简介

函数式组件是使用纯粹的JavaScript函数来定义的。它接收一个props对象作为参数，并返回一个用于描述组件UI的React元素。函数式组件是React中最简单和最常见的方式。

1
2
3
4
5
6
7
//1. 创建函数时式组件
    function MyComponent(props){
      return <h2>我是用函数定义的组件{props}（适用于【简单组件】的定义）</h2>
    }
    //2. 挂载组件到页面
    ReactDOM.render(<MyComponent />,document.getElementById('test'));

执行ReactDOM.render(）之后发生了什么?

  • React 解析组件标签 找到了MyComponent组件
  • 发现组件是使用函数定义的 随后调用该函数 将返回的虚拟DOM转化为真实的DOM随后呈现在页面上。

特点

  • 简洁：相对于类组件，函数式组件通常具有更短、更易读的代码。
  • 无状态：函数式组件没有内部状态（state），它只接收props并返回一个React元素。因此，它被认为是无状态组件。
  • 适用性广泛：函数式组件适用于简单的静态UI展示，或者当不需要内部状态管理和生命周期方法时。

2.类式组件（复杂组件）

简介

类组件是通过继承React的Component类并使用ES6类语法来定义的。类组件具有更多的功能和灵活性，可以使用内部状态（state）和生命周期方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
//1. 创建类式组件
   class MyComponent extends React.Component{
     constructor(props) {
       super(props);
       this.state = { count: 0 };
     }
      render() {
       const {count} = this.state;
       return <h1>{count}</h1>;
     }
   }
   // 2 渲染组件到页面
   ReactDOM.render(<MyComponent />,document.getElementById('test'));

执行render放在哪里?

  • 放在MyCOmponent 的原型对象上 供实例使用。

render中的this是谁？?

  • MyComponent 的实例对象 <==> MyComponent 组件实例对象。

执行ReactDOM.render(）之后发生了什么?

  • React 解析组件标签 找到了MyComponent组件
  • 发现组件是使用类定义的 随后new出来该类的实例 并用该实例调用到原型上的render方法
  • 将rander返回的虚拟DOM转为真实DOM呈现到页面上。

特点

  • 内部状态管理：类组件可以通过使用this.state对象来管理内部状态，并通过setState方法更新状态。
  • 生命周期方法：类组件提供了一系列生命周期方法（如componentDidMount、componentDidUpdate等），可以用于在不同的阶段执行特定的逻辑。
  • 适用于复杂逻辑：当组件需要处理复杂的状态管理、生命周期方法和性能优化时，类组件是更合适的选择。