本文共 1526 字，大约阅读时间需要 5 分钟。

React组件开发入门 - 函数式组件与类式组件

一、函数式组件

1.1 函数式组件的定义

函数式组件通过函数返回 JSX 来定义 UI 组件。适用于简单组件。

// 代码示例function MyComponent() {  console.log('我是函数式组件');  return 
   
    
    
我是用函数定义的组件
  
   
;}

1.2 渲染组件到页面

使用 ReactDOM.render 将组件渲染到页面中。

// 代码示例ReactDOM.render(  
   
    
      
   
,  document.getElementById('test'));

1.3 注意事项

• console.log(this) 输出 undefined，因为 Babel 编译后会启用严格模式。
• React 解析组件标签后，发现组件是函数定义的，随后调用函数获取虚拟 DOM 并渲染到页面。

一、类式组件

2.1 类的基本知识

2.1.1 类的创建

类可以通过 class 关键字定义，类似于 ES6 中的class Person。

// 代码示例class Person {  constructor(name, age) {    this.name = name;    this.age = age;  }  speak() {    console.log(`我叫${this.name},年龄是${this.age}`);  }}// 创建实例const p1 = new Person('tom', 18);const p2 = new Person('jerry', 19);p1.speak();p2.speak();

2.1.2 类的继承

通过 extends 关键字实现继承。

// 代码示例class Student extends Person {  constructor(name, age, grade) {    super(); // 调用父类构造器    this.grade = grade;  }  speak() {    console.log(`我叫${this.name},年龄是${this.age},读的是${this.grade}年级`);  }  study() {    console.log('我很努力学习');  }}const s1 = new Student('小张', 15, '高一');s1.speak();s1.study();

2.2 类式组件

类式组件通过类继承 React.Component 来定义 UI 组件，适用于复杂组件。

// 代码示例class MyComponent extends React.Component {  render() {    return (      
   
        
    
我是用类定义的组件
      
   
    );  }}// 渲染组件到页面ReactDOM.render(  
   
    
      
   
,  document.getElementById('test'));

2.3 注意事项

• 类式组件的重点在于继承和 render 方法。
• render 方法放在原型对象上，供实例调用。
• this 在 render 中指向组件实例。

总结

• 类中的构造器不是必须的，只有在需要初始化时才需要写。
• 子类构造器中必须调用 super()。
• 类定义的方法放在原型对象上，供实例调用。

通过以上内容，应该对 React 组件开发有一个基本的理解，可以进一步学习组件间通信、状态管理等高级内容。