【react基础02】编写函数式组件和类组件,msn mac

文件名：【react基础02】编写函数式组件和类组件,msn mac 【react基础02】编写函数式组件和类组件

函数式组件和类组件 React组件的规范函数式组件类组件

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 获取属性对象