python web——react

前言

为了后续自己搭建全栈项目做准备，对react做一定的了解

学习目标：大致看懂react的基本语法，可以在ai的协助下完成前端的搭建

介绍

React 是 Facebook（现 Meta）于 2013 年开源的一套用于构建用户界面的 JavaScript 库，现由 React 核心团队与社区共同维护。

项目搭建

项目创建

npx create-react-app my-app

npx 是什么？

npm 5.2+ 自带的“包运行器”（Node Package eXecute）。类似uv

脚手架（Scaffold / Boilerplate）是什么？

1. 定义：官方或社区提供的“项目模板生成器”，一条命令就能创建带目录结构、配置、脚本、依赖的完整项目骨架。
2. 目的： • 省掉繁琐的初始化、Webpack/Rollup/Vite 配置、ESLint/TypeScript/测试等环境搭建。 • 统一团队规范，降低新人上手成本。

启动开发服务器

cd my-app
npm start        # 或 yarn start

目录速览（核心）

my-app
├─ public/         # 静态资源，index.html 是页面模板
├─ src/
│  ├─ App.js       # 根组件
│  ├─ index.js     # 应用入口（ReactDOM.createRoot）
└─ package.json    # 依赖与脚本

JSX

JSX（JavaScript XML 的缩写）是 React 引入的一种语法糖（syntactic sugar）。它让你在 JavaScript 文件里直接写类 HTML 标记，然后由构建工具（Babel、TypeScript、esbuild、swc）把它翻译成普通的 JavaScript 函数调用。

如下

// 1. 找到 public/index.html 中 id="root" 的 DOM 节点，作为 React 应用的挂载点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 2. 将根组件 <App /> 渲染到该挂载点
root.render(
  // 3. <React.StrictMode> 是 React 提供的开发模式辅助工具
  //    作用：在开发阶段自动检测潜在问题（如过时的 API、副作用重复执行等）
  //    注意：它仅在开发环境生效，生产环境不会渲染任何额外 DOM
  <React.StrictMode>
    {/* 4. 项目真正的根组件 App，所有业务逻辑都从这里开始 */}
    <App />
  </React.StrictMode>
);

箭头函数

React（以及所有现代 JavaScript）里，“箭头”指的是 箭头函数（Arrow Function），语法是：

const 函数名 = (参数) => 返回值或语句块

它的作用可以概括为 “更简洁的函数声明 + 词法作用域的 this”。

通俗理解：把小括号的内容变成箭头后的内容

函数组件

函数组件 + JSX 的组合作用是： 以函数的形式返回“虚拟 DOM 描述”，交由 React 渲染成真实 DOM，而不是直接返回 HTML 组件或字符串。

1. 函数组件的“返回值”

function Welcome(props) {
  return <h1>Hello {props.name}</h1>;
}

经过 Babel 编译后等价于：

function Welcome(props) {
  return React.createElement('h1', null, 'Hello ', props.name);
}

React.createElement 会生成一个纯 JS 对象（虚拟节点），而不是一段 HTML 字符串。

使用示例

// 1. 接收父组件传来的 props
function Card({ title, children }) {
  // 2. 返回一段 JSX（最终会被编译成虚拟 DOM）
  return (
    <div className="card">
      <h2>{title}</h2>
      {children}
    </div>
  );
}

使用：

<Card title="函数组件">
  <p>Hello, world!</p>
</Card>

DOM（Document Object Model，文档对象模型）是浏览器在内存里把一份 HTML/XML 文档表示成树形结构的编程接口（API）。

每个节点（元素、文本、注释…）都是一个对象，拥有属性与方法，例如：

const title = document.getElementById('title');
title.textContent = 'Hi React';   // 改文本
title.style.color = 'red';        // 改样式

插值写法

在 React 中，“插值”专指把一段 JavaScript 表达式的实时结果塞进 JSX 的写法。 核心符号只有一对花括号 { }，记住口诀：“JSX 里凡是 {} 包起来的，就是 JavaScript 运行后的值。”

基本文本插值

const name = 'React';
<h1>Hello, {name}!</h1>          // → Hello, React!

属性插值

function App() {
  const mytitle="hello"
  return (
    <div title={mytitle}></div>
  );
}

数据渲染

条件渲染

function App() {
  const mytitle="hello"

  let mycontent=null
  const flag=true
  if(flag){
    mycontent=<h2>hello</h2>
  }
  else{
    mycontent=<h2>world</h2>
  }
  return (
    <div title={mytitle}>{mycontent}</div>
  );
}

列表渲染

function App() {
  const list=['1','2','3']
  const mycontent=list.map((item)=>{
    return <li>{item}</li>
  })
  return (
    <div>{mycontent}</div>
  );
}

1. .map((item) => { ... }) ‑ Array.prototype.map：遍历数组，把每个元素依次交给回调函数处理，并返回一个新数组。 ‑ (item) 是每次循环拿到的当前元素。
2. return <li>{item}</li> ‑ 每一次循环里，把当前元素 item 用 JSX 插值语法 {item} 放进 <li> 标签里。

状态处理

import { useState } from 'react';
function App() {
  const [mycontent,setmycontent]=useState("hello world");
  function changeContent(){
    setmycontent("hello world2");
  }
  return (
    <>
      <div>{mycontent}</div>
      <button onClick={changeContent}>change</button>
    </>
  );
}

useState 是 React 提供的 Hook，让函数组件也能拥有内部状态（state）。可以通过更新函数，调用后触发重新渲染。

对象的状态更新

import { useState } from 'react';
function App() {
  const [mycontent,setmycontent]=useState({
    title:'hello world',
    content :'hello world content'
});
  function changeContent(){
    setmycontent({
      ...mycontent,
      content:'new content'
    });
  }
  return (
    <>
      <div title={mycontent.title}>{mycontent.content}</div>
      <button onClick={changeContent}>change</button>
    </>
  );
}

...mycontent 是 ES6 的 对象展开运算符（object spread）。 一句话：把 mycontent 里所有“旧属性”先抄出来，然后再覆盖/新增你后面写的属性。

react组件的使用

import { useState } from 'react';
function App() {
return (
    <>
      <img src={logo} className="App-logo" alt="logo" style={{ width: '100px',backgroundColor: 'grey'}}/>
    </>
  );
}

1. className 代替 class 传统 HTML 写 <img class="App-logo">；React 组件里必须用 className，因为 JSX 最终会被编译成 JavaScript 对象，而 class 是 JS 的保留关键字。

2. 样式写成对象

HTML 写行内样式：style="width:100px;background-color:grey" React 必须写成对象：

style={{
  width: '100px',
  backgroundColor: 'grey'   // 驼峰命名
}}

因为 JSX 属性最终会变成 JS 对象的键值对，键名必须合法（驼峰），值可以是任何 JS 值（数字、变量、计算结果）。

3. 最终产物是虚拟 DOM 节点

<img src={logo} ... /> 在浏览器里不会直接变成 <img> 标签，而是先被编译成：

React.createElement('img', {
  src: logo,
  className: 'App-logo',
  alt: 'logo',
  style: { width: '100px', backgroundColor: 'grey' }
});

React 再拿这个对象去做 diff、更新真实 DOM，而不是直接 innerHTML。

function App() {

  const imgdata={
    className:"App-logo",
    style:{
      width:'100px',
      backgroundColor:'grey'
    }
  }

  return (
    <>
      <img src={logo} alt="logo" {...imgdata}/>
    </>
  );
}

利用 JSX 展开运算符（spread attributes） 把 imgdata 里的所有键值一次性“拍平”到 <img> 标签上

组件复用

function Article(props) {
  return (
    <div>
      <h2>{props.title}</h2>
      <p>{props.content}</p>
    </div>
  );
}

function App() {
  return (
    <>
      <Article title="标签1" content="内容1" />
      <Article title="标签2" content="内容2" />
    </>
  );
}

组件通信

组件通信的 4 条主线

1️⃣ 父 → 子：props 2️⃣ 子 → 父：回调函数 3️⃣ 隔代/任意：Context 4️⃣ 全局/远端：状态管理库（Zustand、Redux、React Query）

父 → 子

function Parent() {
  const title = 'Hello React';
  return <Child title={title} />;
}

function Child({ title }) {
  return <h1>{title}</h1>;
}

子 → 父

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <>
      <p>父：{count}</p>
      <Child onInc={() => setCount(c => c + 1)} />
    </>
  );
}

function Child({ onInc }) {
  return <button onClick={onInc}>子按钮 +1</button>;
}

父组件把“修改函数”通过 props 传给子组件，子组件在合适的时机调用它，把数据作为参数传回去。

react hooks

Hook 是什么？ Hook 是 React 16.8 引入的 函数级 API，让函数组件拥有

• 状态（useState）
• 生命周期（useEffect）
• 上下文（useContext）
• 自定义逻辑（自定义 Hook） 而不必写 class。

参考资料

20分钟学会React Hooks 前端开发必看 AI编程工具 CodeGeeX 体验_哔哩哔哩_bilibili