React笔记(1)

纸鸢风2024-12-09

1、组件的导入和导出

react组件有两种导出方式：默认导出和具名导出
一个文件里有且仅有一个默认导出，但是可以有任意多个具名导出

// 默认导入和导出
export default function Button(){}
import Button from './Button.js';

// 具名导入和导出
export function Button() {}
import { Button } from './Button.js';

当使用默认导入时，你可以在 import 语句后面进行任意命名。比如 import Banana from './Button.js'

React组件是一段可以使用标签进行扩展的JavaScript函数

2、JSX

JSX：将标签引入 JavaScript。
JSX 是一种语法扩展
规则：

只能返回一个根元素
如果想要在一个组件中包含多个元素，使用<div></div>或<></>包裹起来
标签必须闭合
<img> 写成 <img />，<li>oranges 写成 <li>oranges</li>
使用驼峰式命名法给大部分属性命名
需要用 strokeWidth 代替 stroke-width。由于 class 是一个保留字，所以在 React 中需要用 className 来代替

这是因为JavaScript变量名称不能包含 - 符号或者像 class 这样的保留字

3、在 JSX 中通过大括号使用 JavaScript

引入JavaScript变量

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}

调用JavaScript函数

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'zh-CN',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}

使用JavaScript对象
使用双大括号来书写css和对象

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}

内联 style 属性使用驼峰命名法编写。例如，HTML <ul style="background-color: black"> 在你的组件里应该写成 <ul style={{ backgroundColor: 'black' }}>

4、props

props是传递给JSX标签的信息

function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

export default function Profile() {
  return (
    <div>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi', 
          imageId: 'YfeOqp2'
        }}
      />
      <Avatar
        size={80}
        person={{
          name: 'Aklilu Lemma', 
          imageId: 'OKS67lh'
        }}
      />
      <Avatar
        size={50}
        person={{ 
          name: 'Lin Lanying',
          imageId: '1bX5QH6'
        }}
      />
    </div>
  );
}

props是react组件的唯一参数

function Avatar(props) {  
	let person = props.person;  
	let size = props.size;  
	// ...
}

给props一个默认值：

1
2
3

function Avatar({ person, size = 100 }) {  
	// ...  
}

使用 JSX 展开语法传递 props

rfunction Profile(props) {  
	return (  
		<div className="card">  
		<Avatar {...props} />  
		</div>  
	);
}

将 JSX 作为子组件传递
父组件在名为 children 的 props 中接收并渲染子组件

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

props是只读的，不能尝试更改

5、条件渲染

使用if/else判断条件

function Item({ name, isPacked }) {
  if (isPacked) {
    return <li className="item">{name} ✅</li>;
  }
  return <li className="item">{name}</li>;
}

可以根据条件返回null

function Item({ name, isPacked }) {
  if (isPacked) {
    return null;
  }
  return <li className="item">{name}</li>;
}

三目运算符

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {isPacked ? (
        <del>
          {name + ' ✅'}
        </del>
      ) : (
        name
      )}
    </li>
  );
}

与运算符（&&）

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✅'}
    </li>
  );
}

在 JSX 里，React 会将 false 视为一个“空值”，就像 null 或者 undefined，这样 React 就不会在这里进行任何渲染

选择性地将 JSX 赋值给变量

function Item({ name, isPacked }) {
  let itemContent = name;
  if (isPacked) {
    itemContent = (
      <del>
        {name + " ✅"}
      </del>
    );
  }
  return (
    <li className="item">
      {itemContent}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride 的行李清单</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="宇航服" 
        />
        <Item 
          isPacked={true} 
          name="带金箔的头盔" 
        />
        <Item 
          isPacked={false} 
          name="Tam 的照片" 
        />
      </ul>
    </section>
  );
}

6、渲染列表

使用map()方法从数组中渲染数据

const people = [
  '凯瑟琳·约翰逊: 数学家',
  '马里奥·莫利纳: 化学家',
  '穆罕默德·阿卜杜勒·萨拉姆: 物理学家',
  '珀西·莱温·朱利亚: 化学家',
  '苏布拉马尼扬·钱德拉塞卡: 天体物理学家',
];

export default function List() {
  const listItems = people.map(person =>
    <li>{person}</li>
  );
  return <ul>{listItems}</ul>;
}

使用filter()对数组项进行过滤

const people = [
  {
    id: 0,
    name: '凯瑟琳·约翰逊',
    profession: '数学家',
    accomplishment: '太空飞行相关数值的核算',
    imageId: 'MK3eW3A',
  },
  {
    id: 1,
    name: '马里奥·莫利纳',
    profession: '化学家',
    accomplishment: '北极臭氧空洞的发现',
    imageId: 'mynHUSa',
  },
];

export default function List() {
  const chemists = people.filter(person =>
    person.profession === '化学家'
  );
  const listItems = chemists.map(person =>
    <li>
      <img
        src={getImageUrl(person)}
        alt={person.name}
      />
      <p>
        <b>{person.name}:</b>
        {' ' + person.profession + ' '}
        因{person.accomplishment}而闻名世界
      </p>
    </li>
  );
  return <ul>{listItems}</ul>;
}

用 key 保持列表项的顺序

在渲染列表时，需要为每一项都指定一个key，这个key应该是静态的，而不是在运行时动态生成的

1	<li key={person.id}>...</li>

为每个列表项显示多个 DOM 节点

把生成的节点用一个 <div> 标签包裹起来，或者使用长一点但更明确的 <Fragment> 写法

import { Fragment } from 'react';

// ...
// Fragment标签本身不会出现在 DOM 上
const listItems = people.map(person =>
  <Fragment key={person.id}>
    <h1>{person.name}</h1>
    <p>{person.bio}</p>
  </Fragment>
);