React组件的规范

1、命名遵循PascalCase原则，即所有单词首字母大写，然后拼接在一起
如：Age 、FirstName

函数式组件

代码：

import ReactDOM from 'react-dom/client';const Hero = (props) => {return <div> 我是{props.name}</div>
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hero name="蜘蛛侠"></Hero>
);

说明：

1、包的引入以前有 import ReactDOM from 'react-dom';的写法，现在不再支持了，控制台会报出警告，让你替换成import ReactDOM from 'react-dom/client';
2、参数props是这个Hero对象的属性集合，name是这个对象中的属性

代码：

import ReactDOM from 'react-dom/client';const Hero = (props) => {let {name} = props;//也可以先将name解构出，再输出return <div> 我是{name}</div>
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hero name="蜘蛛侠"></Hero>
);

说明：

1、let {name} = props; 也可以先将name解构出，再输出

类组件

代码：

import React from 'react';
import ReactDOM from 'react-dom/client';class Hero extends React.Component{render(){return  <div> 我是{this.props.name}</div>}
}const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hero name="蜘蛛侠"></Hero>
);

说明：

1、类函数需要继承 React.Component
2、类函数中使用 this.props 获取属性对象