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

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
2
3
4
5
6
7
8
9

说明：

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
2
3
4
5
6
7
8
9
10

说明：

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
2
3
4
5
6
7
8
9
10
11
12
13

说明：

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