React是用于构建用户界面的JavaScript库,核心是函数组件+Hooks实现状态驱动视图,需注意不可变更新、正确使用key、单向数据流及自定义Hook依赖完整性。

React 不是框架,而是一个用于构建用户界面的 JavaScript 库;它本身不处理路由、状态持久化或 HTTP 请求,这些需要额外选型。你用它写组件,不是“学完 React 就能做完整应用”,而是“用 React 写出可复用、可组合、响应数据变化的 UI 单元”。
React 组件怎么写:函数组件 + useState 是当前标准写法
过去类组件(class Component)已基本被弃用。现在默认用函数组件配合 Hooks。关键点不是“语法多炫”,而是理解“状态驱动视图”的闭环:
-
useState声明一个状态变量和更新函数,每次调用更新函数会触发组件重渲染 - JSX 不是字符串模板,是 JavaScript 的语法扩展,最终被编译为
React.createElement()调用 - 组件名必须大写(如
Button),否则 JSX 会把它当 HTML 原生标签处理
function Counter() {
const [count, setCount] = useState(0);
return (
Count: {count}
);
}
为什么 key 属性不能用 index?
当你用 map() 渲染列表时,React 要靠 key 区分每个子元素的身份。用数组索引(index)作 key 在以下情况会出错:
- 列表项顺序变动(如排序、拖拽)→ React 错误复用 DOM 节点,导致输入框失焦、动画错乱
- 列表项增删 → 状态错位(比如第 2 个 item 的
checked状态跑到第 3 个上)
正确做法:使用每项数据中稳定唯一的标识,如 user.id、post.slug。没有就生成(但别用 Date.now() 或 Math.random(),避免重复)。
本文档主要讲述的是Sencha touch 开发指南;主要介绍如何使用Sencha Touch为手持设备进行应用开发,主要是针对iPhone这样的高端手机,我们会通过一个详细的例子来介绍整个开发的流程。 Sencha Touch是专门为移动设备开发应用的Javascrt框架。通过Sencha Touch你可以创建非常像native app的web app,用户界面组件和数据管理全部基于HTML5和CSS3的web标准,全面兼容Android和Apple iOS。希望本文档会给有需要的朋友带来帮助;感兴趣的
组件通信:父传子用 props,子传父用回调函数
React 没有全局状态或双向绑定。父子之间传递数据靠显式约定:
- 父组件把数据和函数作为
props传给子组件(如) - 子组件内部调用传入的函数(如
props.onChange(newVal)),由父组件决定如何响应 - 跨层级通信不要硬传 props,改用
useContext(适合主题、权限等低频变更场景)或状态管理库(如 Zustand、Jotai)
别在子组件里直接修改父组件的 state 变量 —— 这违反单向数据流,调试时你会找不到状态更新源头。
真实项目里最容易被忽略的点
初学者常卡在“组件渲染了但 UI 没变”,问题往往不在 React 本身,而在:
- 状态更新用了赋值(
obj.name = 'x')而非不可变更新({...obj, name: 'x'}),React 浅比较发现引用没变,跳过渲染 - 异步操作后更新状态,但组件已卸载(如请求返回时页面已跳走),导致
setState on unmounted component警告甚至内存泄漏 - 自定义 Hook 里忘了加依赖数组(
useEffect(..., [])),或数组漏写了某个变量,造成闭包捕获旧值
这些问题不会报错,但会让 UI 表现和预期不一致 —— 它们藏在“数据流是否真正贯通”这个细节里,而不是语法对不对。









