# react-ai-prefix

**Repository Path**: ifredom/react-ai-prefix

## Basic Information

- **Project Name**: react-ai-prefix
- **Description**: react-ai-prefix composer codegen frontend
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-31
- **Last Updated**: 2025-04-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-ai-prefix
> 微信 composer codegen

- 状态管理
- 异步代码
- 内置钩子和自定义钩子
- JSX 是如何提供 React 的开发体验

## React 基础核心

1. JSX语法
  - {} 中写入JS表达式
  - JS中编写HTML代码结构？
  - 驼峰式命名

2. 组件开发
  - 组件定义方式： 通过function定义组件,**组件的名称必须以大写字母开头**
  - 组件返回值： 使用 () 包裹整个组件
3. 状态管理(难点)
  - useState() : 接收一个初始值作为参数，并返回一个包含当前状态值和一个更新状态的函数的数组
  - useEffect() : 用于处理函数组件中的副作用（与渲染结果无关）操作.useEffect 接收一个回调函数作为参数，这个回调函数会在每次组件渲染后执行（默认情况下）。可以通过第二个可选参数（依赖项数组）来控制 useEffect 的执行时机.  执行时机？？？
  - React.createRef() : 访问dom节点。 函数值组件: `const formRef =  useRef(null)`


## React 整体架构与核心功能

### 1. 组件化架构（对比 Vue 组件）

```js
// 函数组件（推荐）
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 类组件（历史遗留）
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

// 使用方式（类似Vue模板）
<Welcome name="React Developer" />;
```

与 Vue 区别：

- React 使用 JSX 代替模板语法
- 组件命名必须首字母大写
- Props 传递使用纯 JS 语法而非 v-bind 指令

### 2. 虚拟 DOM 与协调机制

React 通过虚拟 DOM 实现高效更新，其 diff 算法与 Vue 的区别：

- Vue 使用双向指针的快速 diff
- React 使用基于启发式算法的单端 diff

### 3. 单向数据流

```js
function Counter() {
  const [count, setCount] = useState(0); // 类似Vue的ref

  // 类似Vue的watchEffect
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount((c) => c + 1)}>+1</button>
    </div>
  );
}
```

与 Vue 对比：

- useState ≈ ref()
- useEffect ≈ watchEffect + 生命周期
- 状态更新需要显式调用更新函数

### 4. 组合模式（替代 Vue 插槽）

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

function App() {
  return (
    <Card>
      <h2>React组合模式</h2>
      <p>类似Vue的默认插槽</p>
    </Card>
  );
}
```

## [react官方文档](https://zh-hans.react.dev/learn) 目录结构

1. 起步：安装, 配置编辑器, react开发者工具
2. 描述UI: JSX语法, 导入导出, Props, 条件渲染
3. 添加交互: React.useState()顶层调用, 性能优化，state快照，状态更新函数,批量更新state,更新state中的复杂类型（数组,对象）

## 参考阅读

- [react官方文档](https://zh-hans.react.dev/learn)
- [通用组件](https://zh-hans.react.dev/reference/react-dom/components)