01. 基础

JSX

• 必须闭合标签（如 <br />）
• 只有一个根节点（用 <div>...</div> 或 <>...</> 包裹）

1.HTML 原生特性替换

html 特性	JSX 属性
class	className
for	htmlFor
小写事件名（onclick），需要传函数调用	小驼峰事件名（onClick），且只需要传入函数名即可，不要传函数调用

2.嵌入 JS 代码

用大括号：{ ... }

3.特殊情况

JSX 中，当表达式返回 false、null、undefined 或 true 时，这些值不会被渲染到 DOM 中

4.赋值

JSX 可以赋值给变量，然后用大括号将其嵌入到其他 JSX 中

5.安全性

React 在渲染内容前，默认会进行转义

条件渲染

使用 JavaScript 语法，如 if 语句、&& 和 ? : 操作符有条件地渲染 JSX

<div>
  {isTrue && 'hello'} // && 左侧如果是 0，React 此时则会渲染 0 而不是不进行渲染（可以将左侧的值改成布尔类型）
</div>

列表渲染

使用 JavaScript 的 filter() 和 map() 来实现数组的过滤和转换，将数据数组转换为组件数组

people.map(person =>
  <li key={person.id}>
    <img
      src={getImageUrl(person)}
      alt={person.name}
    />
  </li>
)

key

直接放在 map() 方法里的 JSX 元素一般都需要指定 key 值

这些 key 会告诉 React，每个组件对应着数组里的哪一项，所以 React 可以把它们匹配起来。这在数组项进行移动（例如排序）、插入或删除等操作时非常重要。一个合适的 key 可以帮助 React 推断发生了什么，从而得以正确地更新 DOM 树，避免多余的创建销毁 DOM 节点。

其他

HTML 转 JSX 工具：HTML to JSX

渲染

state 或者 props 发生变化时会触发组件渲染

样式

在 React 中添加 CSS 样式有多种方式：

内联样式

style 需要传入一个对象，样式属性名使用驼峰命名法

function MyComponent() {
  return (
    <div style={{
      color: 'blue',
      fontSize: '16px'
    }}>
      直接内联样式
    </div>
  );
}

引入外部 CSS 文件

import './styles.css';
 
function MyComponent() {
  return (
    <div className="container">
      <h1 className="title">标题</h1>
      <button className="button">点击我</button>
    </div>
  );
}

CSS Modules

/* MyComponent.module.css */
.container {
  border: 1px solid #ddd;
  padding: 20px;
}
 
.header {
  color: #ff6b6b;
}

import styles from './MyComponent.module.css';
 
function MyComponent() {
  return (
    <div className={styles.container}>
      <h1 className={styles.header}>CSS Modules示例</h1>
    </div>
  );
}

Styled Components (CSS-in-JS)

npm install styled-components

import styled from 'styled-components';
 
const StyledButton = styled.button`
  background-color: ${props => props.primary ? '#007bff' : '#6c757d'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  
  &:hover {
    opacity: 0.8;
  }
`;
 
function MyComponent() {
  return (
    <div>
      <StyledButton primary>主要按钮</StyledButton>
      <StyledButton>次要按钮</StyledButton>
    </div>
  );
}