【React】React 哲学

1. 声明式（Declarative）

React 鼓励开发者 描述 UI 应该是什么样子，而不是逐步操作 DOM。

// 声明式
function Greeting({ name }) {return <h1>Hello, {name}</h1>;
}

• 不用手动操作 DOM（document.getElementById / innerHTML）
• React 根据状态自动更新 UI

面试回答示例：

“React 倡导声明式编程，我们只关心状态是什么样子，React 会负责把状态映射成界面，简化了 DOM 操作和状态管理的复杂度。”

---

2. 组件化（Component-Based）

• UI 被拆分成可复用、独立的组件
• 每个组件管理自己的状态和逻辑
• 便于维护和组合

function Button({ onClick, children }) {return <button onClick={onClick}>{children}</button>;
}

面试回答示例：

“React 通过组件化思想，把页面拆成小的、可复用的块，每个组件只关注自己的状态和 UI，提高了代码的可维护性和复用性。”

---

3. 单向数据流（One-way Data Flow）

• 数据从父组件流向子组件
• 状态集中、可控
• 简化调试和逻辑理解

function Parent() {const [count, setCount] = useState(0);return <Child count={count} />;
}

面试回答示例：

“React 数据是单向流动的，父组件通过 props 传递数据给子组件，这样数据的变化是可追踪的，状态管理更清晰。”

---

4. UI = f(state)（函数式思想）

• React 的 UI 可以看作是 状态到界面的函数
• 输入（state/props）确定输出（UI），减少副作用

function TodoList({ todos }) {return (<ul>{todos.map(todo => <li key={todo.id}>{todo.text}</li>)}</ul>);
}

面试回答示例：

“在 React 中，界面完全由状态驱动，我们可以把 UI 看作是状态的函数，状态变化就会自动映射到 UI 上。”

---

5. 虚拟 DOM（Virtual DOM）

• React 使用虚拟 DOM 对比状态变化前后的差异，只更新必要的部分
• 提高渲染效率

面试回答示例：

“React 使用虚拟 DOM diff 算法，避免不必要的 DOM 操作，提升性能，同时开发者不用手动优化 DOM。”

---

6. hooks

Hooks 之所以叫钩子，是因为它提供了一种方式，让函数组件可以‘钩入’ React 的状态管理和生命周期等机制。

比如 useState 钩住了 state，useEffect 钩住了副作用逻辑。它的本质就是一个连接点，让函数组件不再只是一个纯函数，而能复用逻辑、维护状态，从而拥有类组件的能力甚至更灵活。

✅ 总结

1. 声明式：只描述想要的 UI
2. 组件化：UI 拆分成独立、复用的组件
3. 单向数据流：父传子，状态可控
4. 函数式 UI：UI = f(state)
5. 虚拟 DOM：高效更新 DOM