React 是一个由 Facebook 开发的专注于 UI 层的 JavaScript 库,通过组件化、声明式编程和虚拟 DOM 实现高效、可维护的界面开发;支持 JSX 语法、函数/类组件、状态管理及 Hooks 等核心特性。

React 是一个用于构建用户界面的 JavaScript 库,由 Facebook 开发并开源。它不是全栈框架,只专注在 UI 层——把界面拆成独立、可复用的组件,再用声明式的方式描述状态变化时界面“应该长什么样”,而不是手动操作 DOM。
JSX:逻辑与结构写在一起
JSX 不是 HTML,也不是字符串,而是 React 元素的语法糖。它会被 Babel 编译成 React.createElement() 调用。比如:
Hello, {name}
→ React.createElement(‘h1’, null, ‘Hello, ‘, name)
关键点:
立即学习“Java免费学习笔记(深入)”;
必须引入 React(即使没显式调用,JSX 编译后仍依赖它) 表达式用 {} 包裹,不能写 if/for 语句,但可用三元、逻辑运算或提前计算 标签必须闭合,自闭合标签写成 ,组件名首字母必须大写( ✅, ❌) 默认防 XSS,内容会自动转义({userInput} 是安全的)
组件:UI 的基本单元
组件是接受 props、返回 JSX 的函数或类,是 React 的核心抽象。所有界面都由组件组合而成。
两类主流写法:
函数组件:轻量、易测试,配合 Hooks 可管理状态和副作用(推荐方式) 类组件:有生命周期方法和 this.state,适合维护老项目,新代码一般不用
组件之间通过 props 传递数据,单向流动,父传子、不可逆改。例如:,子组件用 props.name 或解构 {name} 获取。
状态与更新:驱动界面变化
组件内部的动态数据叫 state,用 useState(函数组件)或 this.setState(类组件)修改。每次 state 改变,React 自动触发重新渲染(re-render),但只更新变化的部分。
背后的机制依赖两个关键设计:
虚拟 DOM:内存中 JS 对象树,描述真实 DOM 结构;更新前先比对新旧虚拟 DOM 差异(Diff 算法),再批量最小化操作真实 DOM key 属性:列表渲染时必须为每个元素提供稳定、唯一、不乱序的 key,帮助 React 精准识别增删改,避免状态错位
Hooks:让函数组件也能处理复杂逻辑
Hooks 是函数组件“拥有状态”和“响应生命周期”的方式。最常用的是:
useState:管理本地状态 useEffect:处理副作用(如数据请求、订阅、DOM 操作) useContext:跨多层组件共享数据,替代繁琐的 props 逐层传递 useMemo / useCallback:优化性能,避免重复计算或重渲染
Hooks 必须写在函数组件顶层,不能在条件或循环中调用,确保每次渲染调用顺序一致。
基本上就这些。React 的力量不在语法多炫,而在于用组件 + 声明式 + 虚拟 DOM 这套组合,把“界面随数据变化”这件事变得可预测、可拆分、可维护。
以上就是javascript的React是什么_它的核心概念有哪些?的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1542665.html
微信扫一扫
支付宝扫一扫