步入React前厅 - Props、列表渲染、条件渲染

目录

扩展学习资料

什么是props

@/src/components/listItem.jsx

函数组件

@/src/components/listItemFunc.jsx

函数组件要素

列表渲染

@/src/App.js

条件渲染

小结


扩展学习资料

预习资料名称

链接

备注

列表渲染进阶知识

浅谈 React 列表渲染 - 知乎

建议看完文章阅读

更多的条件渲染的方式

【译】React的8种条件渲染方法 - 掘金  

建议看完文章阅读

什么是props

当React元素作为自定义组件,将JSX所接受的属性转换为单个对象传递给组件,整个对象被称为“props”【properties】【属性】

父组件传递给子组件的参数对象

  • Props是组件的固有属性【通过jsx标签传递给子组件】
  • 在子组件内部不可以对props进行修改
  • 更新props:需要通过父组件重新传入新的props更新子组件【react是单向数据流,父->子数据】

@/src/components/listItem.jsx

import React, { Component } from 'react';
let count = 0
class ListItem extends Component {
  // 类的构造函数
  // eslint-disable-next-line no-useless-constructor
  constructor(props) {
    // JS规定,子类的构造函数必须先调用一下super函数
    //=>类似于call的继承:在这里super相当于把Component的constructor给执行了,并且让方法中的this是ListItem的实例,super当中传递的实参都是在给Component的constructor传递。
    super(props);
    // super 除了在 constructor 里直接调用外还可以使用 super.xxx(…) 来调用父类上的某个原型方法,这同样是一种限定语法。
  }
  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">{this.manageCount()}</div>
      </div>
      )
  }
  manageCount() {
    return count + "个";
  }
}
 
export default ListItem;

函数组件

@/src/components/listItemFunc.jsx

import React from 'react';
let count = 0;
const ListItem = (props) => {
  // 函数组件是没有this关键字的。
  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;

函数组件要素

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

没涉及到状态,只是渲染数据,建议使用函数组件,更好的性能,纯函数,轻量级

列表渲染

react jsx不是模板引擎,需要使用js表达式完成列表渲染

Arr.map( function (item) {
    return ...
})

@/src/App.js

import React from 'react';
import './App.css';
import ListItem from './components/listItem';
import ListItemFunc from './components/listItemFunc';
const listData = [
  {
    id: 1,
    name: 'sony 65寸高清电视',
    price: 4000,
    stock: 1,
  },
  {
    id: 2,
    name: '华为 Meta30',
    price: 6000,
    stock: 12,
  },
  {
    id: 3,
    name: '华硕 玩家国度笔记本',
    price: 10000,
    stock: 11,
  },
];
function App() {
  // React.createElement()
  return (
    <div className='container'>
      <h1>类组件:购物车</h1>
      {listData.map((item) => {
        return <ListItem data={item} key={item.id} />;
      })}
      <h1>函数组件:购物车</h1>
      {listData.map((item) => {
        // 数组元素中使用的key应在兄弟节点间是独一无二的
        return <ListItemFunc data={item} key={'func' + item.id} />;
      })}
    </div>
  );
}
export default App;

条件渲染

条件渲染方法

  • 使用三目运算符【boolean ? case1 : case2】
  • 使用函数做条件判断
  • 使用与运算符&&判断
// 三目运算符
const count = 0;
<div className={`col-2 themed-grid-col${count ? '' : '-s'}`}>
  {count}
</div>
// 函数做条件判断
const listData2 = [];
function renderList() {
    if (listData2.length === 0) {
      return <div className='text-center'>购物车是空的</div>;
    }
    return listData.map((item) => {
      return <ListItem data={item} key={item.id} />;
    });
}
// 与运算符&&判断
const listData = []
class App2 extends Component {
  renderList() {
    return listData.map((item) => {
      return <ListItem key={item.id} data={item} />;
    });
  }
  render() {
    return (
      <div className='container'>
        {listData.length === 0 && (
          <div className='text-center'>购物车是空的</div>
        )}
        {listData.map((item) => {
          return <ListItem key={item.id} data={item} />;
        })}
      </div>
    );
  }
}

小结

  1. Props概念
  2. 不同类组件Props传递
  3. 列表渲染
  4. 条件渲染

学后练习

1、在vue中使用指令 v-else-if来实现多重判断,那么在React中我们使用表达式,可以如何实现这样的多重判断?

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值