React基础篇之组件

React

技术

发布日期: 2023-08-29

props

概念

当React作为自定义组件，将JSX所接受的属性转换为单个对象传递给组件，这个对象被称为‘props’，可以理解为props就是父组件传递给子组件的参数对象（与vue的props类似）

规则

props是组件的固有属性，他是通过JSX标签传递给子组件的
不可在(子)组件内部对props进行修改（与vue相似）
更新props：需要通过父组件重新传入新的props，更新子组件（与vue相似）

==归纳：props是一个单向的数据流==

函数式组件

原先的类组件写法

import React, { Component } from "react";

let count = 0;

class ListItem extends Component {

  constructor(props){
    super(props)
  }

  manageCount(){
    return count + '个'
  }

  render() {
    return (
      <div className="row mb-3">
        <div className="col-6 themed-grid-col">{this.props.data.name}</div>
        <div className="col-1 themed-grid-col">¥{this.props.data.price}</div>
        <div className="col-2 themed-grid-col">{count}</div>
      </div>
    )
  }
}

export default ListItem;

改用函数式组件后的写法

import React from "react";

let count = 0;

const ListItem = (props) => {
  return (
    <div className="row mb-3">
      <div className="col-6 themed-grid-col">{props.data.name}</div>
      <div className="col-1 themed-grid-col">¥{props.data.price}</div>
      <div className="col-2 themed-grid-col">{count}</div>
    </div>
  );
};

export default ListItem;

以上写法效果相同，父组件传值方式不变

函数式组件和类组件的一个不同是函数组件的props是直接通过参数的形式传递下来的，使用时不需要使用this引用

==不管是函数式组件还是类组件最终都会通过babel编译成浏览器可以执行的代码==

函数组件要素

函数组件也叫无状态组件
组件内部没有this（组件实例）
没有生命周期

函数组件优点

比较轻量，如果组件内部不需要使用状态(只是用来渲染数据)的话，使用函数组件可以获得更好的性能

列表渲染

在react中，如果想像vue中的v-for一样循环渲染数据的话可以用map方法

const listData = [
  {
    id: 1,
    name: 'sony电视',
    price: 4000,
    stock: 20
  },
  {
    id: 2,
    name: '华为meta',
    price: 7800,
    stock: 50
  },
  {
    id: 3,
    name: '小米手机',
    price: 5600,
    stock: 80
  }
]

function App () {
  return (
    <div className='container'>
      {listData.map((item,idx)=>{
        return <ListItem key={idx} data={item} />
      })}
    </div>
  )
}

需要注意的是，在react中渲染列表数据与vue一样都需要一个key用来标识唯一性

条件渲染

在react中，如果想像vue中的v-if一样根据条件渲染数据的话可以有很多方法，以下列出常见的三种

使用三元运算符
使用函数做条件判断
使用与运算符&&判断

使用三元运算符

let count = 0;

class ListItem extends Component {

  constructor(props){
    super(props)
  }

  manageCount(){
    return count + '个'
  }

  render() {
    return (
      <div className="row mb-3">
        <div className="col-6 themed-grid-col">{this.props.data.name}</div>
        <div className={"col-1 themed-grid-col" + (count?'':'-s')}>¥{this.props.data.price}</div>
        <div className="col-2 themed-grid-col">{count}</div>
      </div>
    )
  }
}

上面那句运算语句也可以使用es6的模板字符串写成下面这样，效果相同

<div className={`col-1 themed-grid-col${count?'':'-s'}`}>¥{this.props.data.price}</div>

使用函数做条件判断

// import logo from './logo.svg';
import { list } from 'postcss'
import React, { Component } from 'react'
import './App.css'
import ListItem from './components/listItem'
// import ListItem from './components/listItemFunc'

const listData = [
  // {
  //   id: 1,
  //   name: 'sony电视',
  //   price: 4000,
  //   stock: 20
  // },
  // {
  //   id: 2,
  //   name: '华为meta',
  //   price: 7800,
  //   stock: 50
  // },
  // {
  //   id: 3,
  //   name: '小米手机',
  //   price: 5600,
  //   stock: 80
  // }
]

class App extends Component {
  renderList () {
    if (listData.length === 0) {
      return <div className='text-center'>购物车是空的</div>
    }

    return listData.map(item => {
      return <ListItem key={item.id} data={item} />
    })
  }
  render () {
    return (
      <div className='container'>
        {/* {listData.map((item,idx)=>{
          return <ListItem key={idx} data={item} />
        })} */}
        {this.renderList()}
      </div>
    )
  }
}

export default App

使用与运算符&&判断

// import logo from './logo.svg';
import { list } from 'postcss'
import React, { Component } from 'react'
import './App.css'
import ListItem from './components/listItem'
// import ListItem from './components/listItemFunc'

const listData = [
  // {
  //   id: 1,
  //   name: 'sony电视',
  //   price: 4000,
  //   stock: 20
  // },
  // {
  //   id: 2,
  //   name: '华为meta',
  //   price: 7800,
  //   stock: 50
  // },
  // {
  //   id: 3,
  //   name: '小米手机',
  //   price: 5600,
  //   stock: 80
  // }
]

class App extends Component {
  renderList () {

    return listData.map(item => {
      return <ListItem key={item.id} data={item} />
    })
  }
  render () {
    return (
      <div className='container'>
        {/* {listData.map((item,idx)=>{
          return <ListItem key={idx} data={item} />
        })} */}
        {listData.length === 0 && <div className='text-center'>购物车是空的</div>}
        {this.renderList()}
      </div>
    )
  }
}

export default App