React组件的两个实现方式

前言

react组件有两种实现方式：

1. 函数式组件。
2. 类式组件。

函数式组件

函数式组件顾名思义就是以函数方式定义的组件，就是函数式组件。

//创建函数式组件
function Demo() {
  return (
    <div className="Demo">
     	这是以函数方式定义的组件
    </div>
  );
}
//渲染组件到页面
//ReactDOM.render(<Demo />,document.getElementById('root'));
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Demo />);

类式组件

类式组件就是以类的方式定义的组件。

//创建类式组件
class Demo extends React.Component {
  render() {
    return (
      <div>这是以类的方式定义的组件</div>
    )
  }
}
//渲染组件到页面
//ReactDOM.render(<Demo />,document.getElementById('root'));
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Demo />);