All posts by 龙生
React Sass
Sass(Syntactically Awesome Stylesheets)是一种 CSS 预处理器。
Sass 允许你使用 CSS 中尚不存在的特性,比如变量、嵌套规则、混入、函数等等。
Sass 文件在服务器上执行,并将生成的 CSS 发送到浏览器。
React 使用 CSS 样式
在 React 应用程序中使用 CSS 有多种方法。
以下是一些常见的方式以及如何在 React 中实现这些方法的详细说明。
1.内联样式
2.通过样式文件
3.CSS 模块
React Memo
React.memo 是一个高阶组件(Higher Order Component, HOC),用于优化函数组件的性能。它通过记忆组件的渲染输出,在组件的 props 没有变化时跳过重新渲染,从而提高性能。以下是 React.memo 的详细介绍和使用方法。
View DetailsReact 路由
通过使用 React Router,你可以轻松地在 React 应用中实现路由功能,包括基本路由、嵌套路由、动态路由以及 404 页面等。通过这种方式,你可以创建一个功能强大且用户友好的单页应用程序 (SPA)。
View DetailsReact 条件判断
if 语句:适合在 render 方法或函数组件的返回值中使用来决定渲染内容。
三元运算符:适合在 JSX 中进行简洁的条件渲染。
逻辑与 (&&) 运算符:适合在 JSX 中条件渲染,当条件为 true 时渲染元素。
switch 语句:适合处理多个条件,进行不同内容的渲染。
React Refs
React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。
这个特殊的属性允许你引用 render() 返回的相应的支撑实例( backing instance ),这样就可以确保在任何时间总是拿到正确的实例。
在 React 中,Refs(引用)提供了一种访问 DOM 元素或组件实例的方法。使用 Refs 可以直接操作 DOM 元素或获取子组件实例,适用于处理焦点、文本选择、媒体播放、触发强制动画或集成第三方 DOM 库等场景。
View DetailsReact 表单与事件
HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态。
在 HTML 当中,像 <input>, <textarea>, 和 <select> 这类表单元素会维持自身状态,并根据用户输入进行更新。但在React中,可变的状态通常保存在组件的状态属性中,并且只能用 setState() 方法进行更新。
React AJAX
在 React 应用中实现 AJAX 请求,通常可以使用 fetch API 或者第三方库如 axios、jquery 等库来进行网络请求。
以下是使用这两种方法的基本说明:
使用 fetch API 进行 AJAX 请求
fetch 是一个在浏览器中内置的 API,用于发起网络请求。
React 组件生命周期
组件的生命周期可分成三个状态:
Mounting(挂载):已插入真实 DOM
Updating(更新):正在被重新渲染
Unmounting(卸载):已移出真实 DOM
React 组件 API
React 组件 API 涉及多个重要的方面,包括生命周期方法、状态管理、属性传递和事件处理。
以下是 React 组件 API 的详细说明:
React 组件的生命周期方法分为三个主要阶段:挂载、更新和卸载,详细说明参见:React 组件的生命周期 。