React 组件基础

React 组件介绍

对特定功能的封装，主要用来对UI进行拆分。

内容

结构 HTML

样式 CSS

逻辑 JS

特点

• 独立

• 可复用

• 可组合

分类

• 基础组件：指input、button这种基础标签，以及antd封装过的通用UI组件

• 业务组件：由基础组件组合成的业务抽象化UI。例如: 包含了A公司所有部门信息的下拉框

• 区块组件：由基础组件组件和业务组件组合成的UI块

• 页面组件：展示给用户的最终页面，一般就是对应一个路由规则

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'))

对比

1. 类组件比较繁琐

2. 函数式组件比较简便

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

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

定义组件

使用 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>, document.getElementById('root'))

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

类组件-用class创建组件

格式

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

注意:

1. 类名必须以大写字母开头

2. extends是一个关键字，用来实现类之间的继承。类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性。

3. 类组件必须提供 render 方法，render 方法必须有返回值，表示该组件的 UI 结构。render会在组件创建时执行一次

示例

// 导入 React
import React from 'react'
class Hello extends React.Component {
  render() {
    return <div>Hello Class Component!</div> 
  }
}

使用组件

// 导入 React
import React from 'react'
import ReactDom from 'react-dom'
// 1. 定义组件
class Hello extends React.Component {
  render() {
    return <div>Hello Class Component!</div> 
  }
}

const content = (<div><Hello/></div>)

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

使用组件的方式与函数式组件一致：可以使用单标签和双标签

有状态组件和无状态组件

什么是状态

定义：是用来描述事物在某一时刻的形态的数据。一般称为state。例如：9月23号时书的库存数量； 18岁时人的身高；

特点：

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

作用：

• 保存数据。例如：要循环生成一份歌曲列表，那要提前准备好歌曲数据吧

• 为后续更新视图打下基础。如果用户点击了操作，让歌单的内容+1了，视图会自动更新（这是由react库决定的）

有状态组件和无状态组件

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

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

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

无状态组件的应用场景

• 组件本身就不需要有状态。例如：渲染一段固定的内容

• 组件本身就没有状态，可以从外部传入

小结

1. 状态：是用来描述事物在某一时刻的形态的数据

2. 状态的特点: 能被修改，改了之后对应的视图也能更新。

3. 函数组件是组件，类组件是组件

类组件的状态

定义状态

1 使用 state = 对象 来做初始化

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

 2 使用constructor(){ super()  this.state ={......}  } 来做初始化

import React from "react";
export default class Hello extends React.Component {
  // 这里的state就是状态
 constructor () {

    super()

    this.state = {
    name:'帅哥在这'
    }
  };

// 在视图中使用
 render() {
    return (
      <>
        <h1>{this.state.name}</h1>
   
      </>
    );
  }
}