7.React组件的两种创建方式

• 7.React组件的两种创建方式
  • 1.使用函数创建组件
  • 2.使用类创建组件

1.使用函数创建组件

• 函数组件: 使用 JS 的函数 (或箭头函数) 创建的组件
• 约定1: 函数名称必须以大写字母开头, React 据此区分 组件 和 普通的React 元素
• 约定2: 函数组件必须有返回值, 表示该组件的结构
• 如果返回值为null, 表示不渲染任何内容
• 渲染函数组件: 用 函数名 作为组件标签名
• 组件标签可以是单标签也可以是双标签

function Hello () {
  return (
  	<div>这是我的第一个函数组件! </div>
  )
}

ReactDOM.render(<Hello />, root) ⭐

2.使用类创建组件

• 类组件: 使用 ES6 的 class 创建组件
• 约定1: 类名称也必须以大写字母开头
• 约定2: 类组件应该继承 React.Component父类, 从而可以使用父类中提供的方法或属性
• 约定3: 类组件必须提供render() 方法
• 约定4: render()方法必须有返回值, 表示该组件的结构

class Hello extends React.Component {
  render() {
    return <div>这是我的第一个类组件! </div>
  }
}

ReactDOM.render(<Hello />, root) ⭐