步入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中我们使用表达式，可以如何实现这样的多重判断？