import React from 'react'
import ReactDOM from 'react-dom'

const title = <h1>react的两种组件</h1>

// 定义一个函数式组件
const Com1 = () => {
  return <div>第一个函数式组件</div>
}

// 定义一个类组件
class Com2 extends React.Component {
  render () {
    return <div>第一个类组件</div>
  }
}

const content = (
  <div>
    {title}
    {<Com1 />}
    <hr />
    {<Com2 />}
  </div>
)

ReactDOM.render(content, document.getElementById('root'))

对比

类组件比较繁琐
函数式组件比较简便

目前市面上的项目中都有使用

函数式组件-使用函数创建组件

定义组件

使用 JS 的函数(或箭头函数)创建的组件，叫做函数组件

约定1：函数名首字符大写

必须以大写字母开头**，React 据此区分组件和普通的 HTML

约定2：必须有返回值

表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null

示例：

// 1. 使用普通函数创建组件：
function Hello() {
  return <div>这是我的第一个函数组件!</div>
}

function Button() {
  return <button>按钮</button>
}

// 2.  使用箭头函数创建组件：
const Hello = () => <div>这是我的第一个函数组件!</div>

使用组件

使用组件就像使用 HTML 标签一样。用函数名称作为组件标签名称

// 使用双标签渲染组件：
<Hello></Hello>

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

// 使用单标签渲染组件：
<Hello />
ReactDOM.render(<Hello />, root)

类组件-用class创建组件

定义格式

使用 ES6 的 class 创建的组件，叫做类（class）组件

格式

// import { Component } from 'react'
// class 类名 extends Component {
import React form 'react'
class 类名 extends React.Component {
  // ... 
  render () {
    return 本组件的UI结构
  }
}

注意:

类名必须以大写字母开头
extends是一个关键字，用来实现类之间的继承。类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性。
类组件必须提供 render 方法，render 方法必须有返回值，表示该组件的 UI 结构。render会在组件创建时执行一次

有状态组件和无状态组件

什么是状态

定义：是用来描述事物在某一时刻的形态的数据。一般称为state。

例如：9月23号时书的库存数量； 18岁时人的身高；

特点：

状态能被改变，改变了之后视图会有对应的变化

作用： 1. 保存数据 . 2. 为后续更新视图打下基础

区别:

有状态组件：能定义state的组件。类组件就是有状态组件。

无状态组件：不能定义state的组件。函数组件又叫做无状态组件

注意：2019年02月06日，rect 16.8中引入了 React Hooks,从而函数式组件也能定义自己的状态了

无状态组件的应用场景

组件本身就不需要有状态。例如：渲染一段固定的内容
组件本身就没有状态，可以从外部传入

类组件的状态

定义状态

固定格式，使用 state = 对象 来做初始化

import React from "react";
export default class Hello extends React.Component {
  // 这里的state就是状态
  state = {
    list: [{ id: 1, name: "明天会更好" },{ id: 2, name: "难忘今宵" }],
    isLoading: true
  };
}

在视图中使用

  render() {
    return (
      <>
        <h1>歌单-{this.state.count}</h1>
        <ul>
          {this.state.list.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
        <div>{this.state.isLoading ? "正在加载" : "加载完成"}</div>
      </>
    );
  }

组件的状态-修改状态

setState

语法：this.setState({ 要修改的部分数据 })

作用： 1. 修改 state 2. 更新 UI (界面)

示例

state = {
  count: 0 
};

this.setState({
  count: this.state.count++
})

理解状态不可变

react核心理念之状态不可变

不要直接修改当前状态值，而是创建新的状态值。

react 组件介绍 ====

组件

内容

特点

分类

React 组件的两种创建方式

对比