一文讲清楚React中类组件与函数组件的区别与联系

一文讲清楚React中类组件与函数组件的区别与联系

1. React类组件和函数组件

• 顾名思义，类组件就是通过继承类React.Component组件实现的组件，函数组件就是通过普通函数定义的组件

  //类组件
  class MyComponent extends React.Component{constructor(props){super(props)}render(){return(<div>{this.props.name}</div>)}
  }
  //函数组件
  function MyComponent(props){return (<div>{props.name}</div>)
  }

  • 无论是类组件还是函数组件，其功能都是为了更好的进行模块和功能的拆分解耦，使得庞大复杂的业务逻辑可以通过简单明确的小组件组合而成，提高编码和维护的效率
  • 但是在实际使用的过程中，二者有着鲜明的差异，主要表现在一下几点：

2. React类组件和函数组件的差异

2.1 编写形式不同

• 编写形式我们在上面已经写过了，可以看出明显的差异

  2.2 状态管理

• 在hooks没出来之前，类组件是有状态的，函数组件是无状态的
• 我们可以在类组件里面定义组件的状态并进行修改和使用

class MyComponent extends React.Component{constructor(props){super(props)this.state={//定义组件的状态name:'tom'}}handleClick