react
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React 主要用于构建 UI,很多人认为 React 是 MVC 中的 V(视图)。
React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。
React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。
1. 初识React
React 应用程序是由 组件 组成的。一个组件是 UI(用户界面)的一部分,它拥有自己的逻辑和外观。组件可以小到一个按钮,也可以大到整个页面。
React 组件是返回标签的 JavaScript 函数:
function MyButton() { return ( <button>I'm a button</button> ); }
2. jsx
JSX(JavaScript XML)是js内定义的一套XML语法,可以解析出目标js代码,颠覆传统js写法。实质上HTML也是xml协议,有由浏览器解析,而JSX是由js解析。当然也可以通过构建工具先解析生成,如webpack(使用babel-loader),这样可以减少代码这行中js解析JSX的时间。
- 更加熟悉,语法跟HTML非常相似(90以上相似度)
- 更加语义化,允许自定义标签及组件。
- 更加直观,标签处理方式,更加可读。
- 抽象化,React的升级,不需要改动任何JSX代码。
- 关注点分离,模块化,JSX以干净且简洁的方式保证了组件中的标签与所有业务逻辑的互相分离。
2.1 使用注意事项
-
JSX必须严格闭合
//错误 <div> //正确 <div/>(也行,看需求) <div></div> -
JSX标签可以当做一个变量,可以在任何位置使用和使用变量装起来
var div = <div>ddd</div> ReactDOM.render(div); -
JSX一个标签是一个组件,当存在两个组件在同一级,必须使用一个标签(组件)包起来
错误写法
<div></div> <div></div> 正确写法
<span> <div></div> <div></div> </span> -
自定义组件使用首字母大写
首字母不大写直接解析为同名html标签
const test = <div></div> <Test /> //自定义 <div></div> //直接解析为<div></div> <test /> //直接解析为<test></test>,在浏览器是不识别的,无法显示 -
使用驼峰式命名法给 所有 大部分属性命名
<img src="https://i.imgur.com/yXOvdOSs.jpg" alt="Hedy Lamarr" className="photo" />
2.2 JSX使用JavaScipt
2.2.1 变量
var name = "test"; <div>{name + "666"}</div>
2.2.2 大括号{}的使用
JSX 会让你把标签放到 JavaScript 中。而大括号会让你 “回到” JavaScript 中,这样你就可以从你的代码中嵌入一些变量并展示给用户。例如,这将显示 user.name
:
return ( <h1> {user.name} </h1> );
你还可以将 JSX 属性 “转义到 JavaScript”,但你必须使用大括号 而非 引号
return ( <img className="avatar" src={user.imageUrl} /> );
你也可以把更为复杂的表达式放入 JSX 的大括号内(字符串拼接,循环。。。):
const user = { name: 'Hedy Lamarr', imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg', imageSize: 90, }; export default function Profile() { return ( <> <h1>{user.name}</h1> <img className="avatar" src={user.imageUrl} alt={'Photo of ' + user.name} style={{ width: user.imageSize, height: user.imageSize }} /> </> ); }
2.2.3 函数
var names = ['Alice', 'Emily', 'Kate']; <div> { names.map(function (name) { return <div>Hello, {name}!</div> }) } </div>
2.2.4 条件渲染
-
使用 if
<div className={if(isComplete){ 'is-complete' }}></div> -
使用三目运算符
<div className={this.state.isComplete ? 'is-complete' : ''}></div> -
使用&&运算符
<div className={state.isComplete && 'is-complete'}></div>
2.2.5 渲染列表
这里给出一个由数组生成一系列列表项的简单示例:
- 首先,把数据 存储 到数组中:
const products = [ { title: 'Cabbage', isFruit: false, id: 1 }, { title: 'Garlic', isFruit: false, id: 2 }, { title: 'Apple', isFruit: true, id: 3 }, ];
- 遍历
products
这个数组中的每一项,并获得一个新的 JSX 节点数组listItems
:
const listItems = products.map(product => <li key={product.id} style={{ color: product.isFruit ? 'magenta' : 'darkgreen' }} > {product.title} </li>
- 把
listItems
用<ul>
包裹起来,然后 返回 它:
return <ul>{listItems}</ul>;
<li>
有一个 key
属性。对于列表中的每一个元素,你应该传递一个字符串或者数字给 key
,用于在其兄弟节点中唯一标识该元素。这样做可以提高性能。
const products = [ { title: 'Cabbage', isFruit: false, id: 1 }, { title: 'Garlic', isFruit: false, id: 2 }, { title: 'Apple', isFruit: true, id: 3 }, ]; export default function ShoppingList() { const listItems = products.map(product => <li key={product.id} style={{ color: product.isFruit ? 'magenta' : 'darkgreen' }} > {product.title} </li>
2.3 样式
2.3.1 class样式
在 React 中,你可以使用 className
来指定一个 CSS 的 class。它与 HTML 的 class
属性的工作方式相同:
<img className="avatar" />
然后,你可以在一个单独的 CSS 文件中为它编写 CSS 规则:
/* In your CSS */ .avatar { border-radius: 50%; }
2.3.2 style样式
<img className="avatar" style={{ width: user.imageSize, height: user.imageSize }} />
2.4 组件
2.4.1 介绍
react的组件通常是一个函数或者是一个类返回的是一段特殊html代码
function MyButton() { return ( <button>I'm a button</button> ); }
2.4.2 使用
export default function MyApp() { return ( <div> <h1>Welcome to my app</h1> <MyButton /> </div> ); }
2.4.3 props
Props 是你传递给 JSX 标签的信息。例如,className
、src
、alt
、width
和 height
便是一些可以传递给 <img>
的 props
function Avatar() { return ( <img className="avatar" src="https://i.imgur.com/1bX5QH6.jpg" alt="Lin Lanying" width={100} height={100} /> ); } export default function Profile() { return ( <Avatar /> ); }
2.4.4 组件传值
-
父传子
Profile 的子组件是 Avatar
// 给Avatar组件的person传值(传了一个对象){ name: 'Lin Lanying', imageId: '1bX5QH6' } // 给size(传了一个数字) 100 export default function Profile() { return ( <Avatar person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }} size={100} /> ); } 子组件 读取 props
function Avatar(props) { const { person, size } = props return ( <img className="avatar" src={getImageUrl(person)} alt={person.name} width={size} height={size} /> ); }
import { getImageUrl } from './utils.js'; function Avatar({ person, size }) { return ( <img className="avatar" src={getImageUrl(person)} alt={person.name} width={size} height={size} /> ); } export default function Profile() { return ( <div> <Avatar size={100} person={{ name: 'Katsuko Saruhashi', imageId: 'YfeOqp2' }} /> <Avatar size={50} person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }} /> </div> ); }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库