新手入门 React 必备：电影榜单项目核心知识点全解析

一、项目基础结构

src

├── main.jsx # 入口文件（渲染根组件）

├── index.css # 全局样式（清除默认边距）

├── App.jsx # 主组件（数据管理 + 页面骨架）

├── app.css # 主组件样式

└── components/ # 子组件目录

├── MovieItem.jsx # 电影项组件

└── MovieItem.css # 电影项样式

核心文件作用

入口文件：连接React与DOM，渲染整个应用
全局样式 ：统一清除浏览器默认样式（* { margin:0; padding:0 }）
组件拆分：主组件负责数据管理，子组件专注UI展示

二、入口渲染机制（main.jsx）

jsx 复制代码

import { createRoot } from 'react-dom/client'
import App from './App.jsx'

// React 18新特性：createRoot
createRoot(document.getElementById('root')).render(<App />)

知识点 ：createRoot替代旧版ReactDOM.render，支持并发渲染
作用：将App组件挂载到 HTML 中id="root"的 DOM 节点

三、主组件核心逻辑（App.jsx）

1. 状态管理

jsx 复制代码

import { useState } from 'react';

// 定义电影列表状态，初始值为空数组

const [movieList, setMovieList] = useState([])

关键点 ：useState是 React 状态钩子，movieList存储数据，setMovieList用于更新数据
为什么初始为空数组 ：避免map遍历 undefined 报错

2. 数据请求（副作用处理）

jsx 复制代码

import { useEffect } from 'react';
useEffect(() => {
  // 发起API请求
  fetch('https://apis.netstart.cn/maoyan/index/movieOnInfoList')
    .then(res => res.json())
    .then(data => {
      setMovieList(data.movieList) // 更新状态
    })
}, []) // 空依赖数组：只在组件挂载时执行一次

知识点 ：useEffect处理副作用（网络请求、定时器等）
更新机制 ：调用setMovieList后，组件会重新渲染，UI 自动更新

3. 列表渲染

jsx 复制代码

{

 movieList.map((item, i) => (

   <MovieItem key={item.id} data={item} />

 ))

}

关键点：
- 使用map遍历数组生成组件
- key属性必须唯一（用item.id避免重复）
- 通过data属性向子组件传递数据

四、子组件开发（MovieItem.jsx）

1. Props 接收

jsx 复制代码

export default function MovieItem(props) {

 // 接收父组件传递的电影数据

 const movie = props.data;

}

知识点 ：props是父子组件通信的桥梁，只读不可修改

2. 动态数据绑定

jsx 复制代码

// 错误示例（硬编码）

<div className="name">疯狂动物城2</div>

// 正确做法（动态绑定）

<div className="name">{movie.name}</div>

常用绑定场景：
- 图片路径：<img src={movie.img} alt="" />
- 评分：<div className="score">评分：{movie.score}</div>
- 排名：<div className="index">No.{movie.rank}</div>

五、样式实现技巧

1. Flex 布局应用

css 复制代码

/* 横向排列元素 */
.info {
  display: flex;
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
}

/* 纵向排列元素 */
.message {
  display: flex;
  flex-direction: column; /* 垂直方向排列 */
}

2. 背景图处理

css 复制代码

.banner {
  background-image: url('图片地址');
  background-position: center; /* 居中显示 */
  background-size: cover; /* 覆盖容器且保持比例 */
}

3. 文本溢出处理

css 复制代码

.desc {
  overflow: hidden;
  text-overflow: ellipsis; /* 显示省略号 */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 最多显示2行 */
  -webkit-box-orient: vertical;
}

4. 居中定位技巧

css 复制代码

.title-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 精准居中 */
}

六、常见问题与优化

1. 类名拼写错误

css 复制代码

/* 错误：itme（少了一个m） */
.itme { ... }

/* 正确：item */
.item { ... }

2. 加载状态优化

jsx 复制代码

// 添加加载状态
const [isLoading, setIsLoading] = useState(true);

// 请求时
useEffect(() => {
  setIsLoading(true); // 开始加载
  fetch(...)
    .then(...)
    .finally(() => setIsLoading(false)); // 加载完成
}, [])

// 渲染时
{isLoading ? <div>加载中...</div> : /* 列表内容 */}

3. 错误处理

jsx 复制代码

fetch(...)
  .catch(err => {
    console.error('请求失败：', err);
    alert('加载电影数据失败');
  })

通过这些知识点，可以清晰理解 React 项目从数据获取到 UI 渲染的完整流程，以及如何通过组件化和状态管理构建交互界面。