组件&Props
函数组件与 class 组件 1.定义组件最简单的方式就是编写 JavaScript 函数：
function Welcome(props) {
return Hello, {props.name};
}
该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。2.你同时还可以使用 ES6 的 class 来定义组件：
class Welcome extends React.Component {
render() {
return Hello, {this.props.name};
}
}
渲染组件 【react.js|react学习----组件】1.之前，我们遇到的 React 元素都只是 DOM 标签：
const element = ;
2.不过，React 元素也可以是用户自定义的组件：
const element = 3.当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。
例如，这段代码会在页面上渲染 “Hello, Sara”：function Welcome(props) {
return Hello, {props.name};
}const element = 分析：
- 我们调用 ReactDOM.render() 函数，并传入 作为参数。
- React 调用 Welcome 组件，并将 {name: ‘Sara’} 作为 props 传入。
- Welcome 组件将 Hello, Sara 元素作为返回值。
- React DOM 将 DOM 高效地更新为 Hello, Sara。
注意：
组件名称必须以大写字母开头
react会将小写字母开头的组件视为原生dom标签
这就可以让我们用同一组件来抽象出任意层次的细节。
按钮，表单，对话框，甚至整个屏幕的内容：在 React 应用程序中，这些通常都会以组件的形式表示。
function Welcome(props) {
return Hello, {props.name};
}function App() {
return (
提取组件 将组件拆分为更小的组件。
function Comment(props) {
return (
{props.author.name}
{props.text}
{formatDate(props.date)}
);
}
可以拆分为Avatar组件
function Avatar(props) {
return (
);
}
UserInfo组件
function UserInfo(props) {
return (
Comment组件
function Comment(props) {
return (
Props 的只读性
组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。推荐阅读
- react.js|react学习----jsx语法
- javascript|Vite Server 是如何处理页面资源的（）
- java|学习java的第四十二天，GUI编程的基础认知
- 机器学习|K-近邻算法学习
- 机器学习|Pandas 学习
- 机器学习|Numpy学习
- React报错之Expected an assignment or function
- JavaScript|数组乱序、数组去重
- html网页设计|使用html+css+js实现一个静态页面（含源码）