react
文章平均质量分 63
木蓝茶陌*_*
这个作者很懒,什么都没留下…
展开
-
React 18 自定义Hook实现
自定义Hook是以use打头的函数,通过自定义Hook函数可以用来实现逻辑的封装和复用。原创 2024-05-11 16:54:03 · 175 阅读 · 0 评论 -
React 18 跨层组件通信
React 18 跨层组件通信原创 2024-05-11 16:16:58 · 185 阅读 · 0 评论 -
React 18 使用 Context 深层传递参数
Context 使组件向其下方的整个树提供信息。传递 Context 的方法:通过创建并导出 context。在无论层级多深的任何子组件中,把 context 传递给Hook 来读取它。在父组件中把 children 包在中来提供 context。Context 会穿过中间的任何组件。Context 可以让你写出 “较为通用” 的组件。在使用 context 之前,先试试传递 props 或者将 JSX 作为children传递。原创 2023-09-06 10:16:10 · 1208 阅读 · 0 评论 -
React 18 迁移状态逻辑至 Reducer 中
把useState转化为useReducer通过事件处理函数 dispatch actions;编写一个 reducer 函数,它接受传入的 state 和一个 action,并返回一个新的 state;使用useReducer替换useState;Reducers 可能需要写更多的代码,但是这有利于代码的调试和测试。Reducers 必须是纯净的。每个 action 都描述了一个单一的用户交互。使用 Immer 来帮助在 reducer 里直接修改状态。原创 2023-09-01 09:28:04 · 918 阅读 · 0 评论 -
React 18 对 state 进行保留和重置
只要在相同位置渲染的是相同组件, React 就会保留状态。state 不会被保存在 JSX 标签里。它与在树中放置该 JSX 的位置相关联。可以通过为一个子树指定一个不同的 key 来重置它的 state。不要嵌套组件的定义,否则会意外地导致 state 被重置。原创 2023-08-31 17:25:04 · 1264 阅读 · 0 评论 -
React 18 在组件间共享状态
当想要整合两个组件时,将它们的 state 移动到共同的父组件中。然后在父组件中通过 `props` 把信息传递下去。最后,向下传递事件处理程序,以便子组件可以改变父组件的 state 。考虑该将组件视为“受控”(由 prop 驱动)或是“不受控”(由 state 驱动)是十分有益的。原创 2023-08-30 08:50:32 · 797 阅读 · 0 评论 -
React 18 选择 State 结构
如果两个 state 变量总是一起更新,请考虑将它们合并为一个。仔细选择 state 变量,以避免创建“极难处理”的 state。用一种减少出错更新的机会的方式来构建 state。避免冗余和重复的 state,这样就不需要保持同步。除非特别想防止更新,否则不要将 props **放入** state 中。对于选择类型的 UI 模式,请在 state 中保存 ID 或索引而不是对象本身。如果深度嵌套 state 更新很复杂,请尝试将其展开扁平化。原创 2023-08-28 09:31:07 · 1016 阅读 · 0 评论 -
React 18 用 State 响应输入
声明式编程意味着为每个视图状态声明 UI 而非细致地控制 UI(命令式)。当开发一个组件时: 1. 写出组件中所有的视图状态。 2. 确定是什么触发了这些 state 的改变。 3. 通过 `useState` 模块化内存中的 state。 4. 删除任何不必要的 state 变量。 5. 连接事件处理函数去设置 state。原创 2023-08-21 09:08:15 · 531 阅读 · 0 评论 -
React 18 更新 state 中的数组
可以把数组放入 state 中,但不应该直接修改它。不要直接修改数组,而是创建它的一份 新的拷贝,然后使用新的数组来更新它的状态。可以使用 `[...arr, newItem]` 这样的数组展开语法来向数组中添加元素。可以使用 `filter()` 和 `map()` 来创建一个经过过滤或者变换的数组。可以使用 Immer 来保持代码简洁。原创 2023-08-15 10:44:28 · 1412 阅读 · 0 评论 -
React 18 更新 state 中的对象
将 React 中所有的 state 都视为不可直接修改的。当在 state 中存放对象时,直接修改对象并不会触发重渲染,并会改变前一次渲染“快照”中 state 的值。不要直接修改一个对象,而要为它创建一个 新版本,并通过把 state 设置成这个新版本来触发重新渲染。可以使用这样的 `{...obj, something: 'newValue'}` 对象展开语法来创建对象的拷贝。对象的展开语法是浅层的:它的复制深度只有一层。想要更新嵌套对象,需要从更新的位置开始自底向上为每一层都创建新的拷贝。原创 2023-08-14 09:21:11 · 1184 阅读 · 0 评论 -
css modules的用法和在react项目中的应用
CSS Modules 的功能很单纯,只加入了局部作用域和模块依赖,可以保证某个组件的样式,不会影响到其他组件。CSS的规则都是全局的,任何一个组件的样式规则,都对整个页面有效。产生局部作用域的唯一方法,就是使用一个唯一的 `class` 的名字,不会与其他选择器重名。这就是 CSS Modules 的做法。原创 2023-08-11 09:44:58 · 774 阅读 · 0 评论 -
React 18 state 状态更新函数
设置 state 不会更改现有渲染中的变量,但会请求一次新的渲染。React 会在事件处理函数执行完成之后处理 state 更新。这被称为批处理。要在一个事件中多次更新某些 state,可以使用 `setNumber(n => n + 1)` 更新函数。原创 2023-08-10 09:05:38 · 1114 阅读 · 0 评论 -
React 18 state 如同一张快照
设置 state 请求一次新的渲染。React 将 state 存储在组件之外,就像在架子上一样。当调用 `useState` 时,React 会为提供该次渲染 的一张 state 快照。变量和事件处理函数不会在重渲染中“存活”。每个渲染都有自己的事件处理函数。每个渲染(以及其中的函数)始终“看到”的是 React 提供给这个 渲染的 state 快照。可以在心中替换事件处理函数中的 state,类似于替换渲染的 JSX。过去创建的事件处理函数拥有的是创建它们的那次渲染中的 state 值。原创 2023-08-08 08:39:22 · 1516 阅读 · 0 评论 -
React 18 渲染和提交
在一个 React 应用中一次屏幕更新都会发生以下三个步骤:1. 触发;2. 渲染;3. 提交可以使用严格模式去找到组件中的错误如果渲染结果与上次一样,那么 React 将不会修改 DOM原创 2023-08-07 08:59:55 · 1208 阅读 · 0 评论 -
React 18 响应事件
可以通过将函数作为 prop 传递给元素如来处理事件。必须传递事件处理函数,而非函数调用!可以单独或者内联定义事件处理函数。事件处理函数在组件内部定义,所以它们可以访问 props。可以在父组件中定义一个事件处理函数,并将其作为 prop 传递给子组件。可以根据特定于应用程序的名称定义事件处理函数的 prop。事件会向上传播。通过事件的第一个参数e.stopPropagation调用来防止这种情况。事件可能具有不需要的浏览器默认行为。调用e.preventDefault来阻止这种情况。原创 2023-08-05 10:09:56 · 1149 阅读 · 0 评论 -
React的核心概念—组件
组件是 React 的核心概念之一。它们是构建用户界面(UI)的基础。一直以来,创建网页时,Web 开发人员会用标签描述内容,然后通过 JavaScript 来增加交互。这种在 Web 上添加交互的方式能产生出色的效果。现在许多网站和全部应用都需要交互。React 组件是一段可以 使用标签进行扩展 的 JavaScript 函数。使用定义名为Profile的 JavaScript 函数。注意:React 组件是常规的 JavaScript 函数,但组件的名称必须以大写字母开头,否则它们将无法运行!原创 2023-07-26 08:55:45 · 460 阅读 · 0 评论 -
React 18 使用 ref 操作 DOM
Refs 是一个通用概念,但大多数情况下会使用它们来保存 DOM 元素。通过传递指示 React 将 DOM 节点放入。通常,会将 refs 用于非破坏性操作,例如聚焦、滚动或测量 DOM 元素。默认情况下,组件不暴露其 DOM 节点。可以通过使用forwardRef并将第二个ref参数传递给特定节点来暴露 DOM 节点。避免更改由 React 管理的 DOM 节点。如果确实修改了 React 管理的 DOM 节点,请修改 React 没有理由更新的部分。focus()原创 2023-06-21 08:56:56 · 1651 阅读 · 0 评论 -
React 18 使用 ref 引用值
ref 是一个应急方案,用于保留不用于渲染的值。不会经常需要它们。ref 是一个普通的 JavaScript 对象,具有一个名为current的属性,可以对其进行读取或设置。可以通过调用useRefHook 来让 React 给组件一个 ref。与 state 一样,ref 允许在组件的重新渲染之间保留信息。与 state 不同,设置 ref 的current值不会触发重新渲染。不要在渲染过程中读取或写入。这使组件难以预测。原创 2023-06-20 19:25:38 · 1041 阅读 · 0 评论 -
React 18 组件的状态state
当一个组件需要在多次渲染间“记住”某些信息时使用 state 变量。State 变量是通过调用useStateHook 来声明的。Hook 是以use开头的特殊函数。它们能让你 “hook” 到像 state 这样的 React 特性中。Hook 可能会让你想起 import:它们需要在非条件语句中调用。调用 Hook 时,包括useState,仅在组件或另一个 Hook 的顶层被调用才有效。useStateHook 返回一对值:当前 state 和更新它的函数。原创 2023-06-06 08:47:05 · 307 阅读 · 0 评论 -
React 18 组件通信 将props传递给子组件
要传递 props,请将它们添加到 JSX,就像使用 HTML 属性一样。要读取 props,请使用解构语法。可以指定一个默认值,如size = 100,用于缺少值或值为undefined的 props。可以使用JSX 展开语法转发所有 props,但不要过度使用它!像这样的嵌套 JSX,将被视为Card组件的childrenprop。Props 是只读的时间快照:每次渲染都会收到新版本的 props。不能改变 props。当需要交互性时,可以设置 state。原创 2023-06-02 15:16:18 · 1619 阅读 · 0 评论 -
React 18 快速入门
React 18 快速入门。创建和嵌套组件;使用 JSX 编写标签;添加样式;显示数据;条件渲染;渲染列表;响应事件;更新界面 ;使用 Hook。原创 2023-05-31 19:41:34 · 1046 阅读 · 0 评论 -
Create-React-App .env文件自定义配置
React项目build打包时不生成 sourceMap(.map)文件打包项目,主要的目的是为了,压缩代码,加快数据的传输,减少 http 请求,从而优化前端页面的性能。脚手架,默认情况下,打包项目的过程中,都会生成 souceMap(.map)文件。sourceMap 会增加打包以后的文件的体积,对于一些需求是轻量级的项目而言,sourceMap 有点多余。添加.env文件修改变量配置 node.js 运行时候的环境变量,传入 GENERATE_SOURCEMAP 值为 false。1.原创 2021-04-28 09:51:59 · 2570 阅读 · 0 评论 -
react 组件监听浏览器窗口变化
react 组件监听浏览器窗口变化react 组件实现监听浏览器窗口变化,需要在window对象中添加监听事件,事件中参数1是监听的事件,参数2为事件调用的方法。// 监听浏览器窗口变化componentDidMount() { // 在window对象中添加监听事件 window.addEventListener('resize', this.resizeWindow)}// 移除监听窗口变化的事件componentWillUnmount() { window.remove原创 2021-04-26 09:09:51 · 3752 阅读 · 2 评论 -
react学习18-React 使用setState()更新类组件的state
setState分析修改数据是异步的// setState更新数据是异步的this.setState({ num: this.state.num + 1}, () => { // 该函数如果触发,那么就说明状态已经修改完成 console.log(this.state.num)})不要频繁调用setState// 多次频繁调用setState,内部会进行合并,只更新最后一次// 不要频繁调用setState方法this.setState({ num: thi原创 2021-04-21 09:07:09 · 1118 阅读 · 0 评论 -
react学习17-React高阶组件
高阶组件高阶组件 HOC(hight ordered component)withRouter就是高阶组件高阶组件的本质其实就是一个函数,该函数参数接收一个组件,返回值依然是一个组件,返回的组件一般会比参数组件多一些props属性组件代码复用的一种方式(高阶组件可以向别的组件中注入通用的props属性)// 实现一个高阶组件// 参数表示输入的组件function withRouter (InputComponent) { // 函数的返回值也是一个组件 return class原创 2021-04-20 09:12:31 · 346 阅读 · 0 评论 -
react学习16-React路由react-router动态路由和编程式导航
React-router动态路由路由的路径可以进行模糊匹配路由映射的path可以是模糊匹配class DynamicRouter extends React.Component { render () { return ( <Router> <h1>动态路由</h1> <hr/> {/*配置路由的链接原创 2021-04-19 09:11:46 · 818 阅读 · 0 评论 -
react学习15-React路由react-router的基本使用
React-router官网基本使用路由使用的基本步骤:安装依赖包# npm安装npm install react-router-dom# yarn安装yarn add react-router-dom导入路由相关组件import { BrowserRouter as Router, Route, Link } from "react-router-dom";配置路由的容器BrowserRouter(所有的路由相关配置必须包含在容器中)<BrowserRout原创 2021-04-16 09:20:50 · 220 阅读 · 0 评论 -
react学习14-React 虚拟DOM介绍
虚拟DOM为了提高网页的渲染性能,需要使浏览器尽可能少的更新DOMReact的底层通过一种数据结构(其实就是对象{})描述了DOM树的信息其实每一个虚拟节点就是一个普通对象,用于描述真实的DOM元素这样会形成一个虚拟DOM树—真实的DOM树如果DOM元素对应的数据发生变化,那么虚拟DOM树会进行对比更新后的DOM树会和更新前进行对比(diff)对比的结果就是发生变化的虚拟节点集合把上述虚拟节点(普通对象)转化为真实的DOM元素把生成的真实DOM添加到页面// vnodevar ob原创 2021-04-15 09:12:34 · 174 阅读 · 0 评论 -
react学习13-React 组件化—children(插槽)详解
children(插槽)children的作用类似于Vue中插槽的概念。children属性名固定,它是React的核心API。class Test extends React.Component { render () { return ( <div> <div>测试Children:</div> <div>{this.props.chi原创 2021-04-14 09:06:50 · 1369 阅读 · 0 评论 -
react学习12-React 组件化—组件属性的延展操作
组件属性的延展操作组件标签传递属性时可以借助对象的延展操作,一次性把所有的属性添加进去import React from 'react'class Test extends React.Component { render () { return ( <div> <div>{this.props.msg}</div> <div>{this原创 2021-04-13 09:14:35 · 162 阅读 · 0 评论 -
react学习11-React 组件化—类表达式和点标记组件语法详解
类表达式类表达式是类的另外一种定义方式,类似于函数表达式。类表达式:let Person = class { constructor(uname, age) { this.uname = uname this.age = age }}let p = new Person ('zhangsan', 13)console.log(p)类表达式继承用法:let Student = class extends Person { constr原创 2021-04-12 09:07:18 · 259 阅读 · 0 评论 -
react学习10-React 表单受控和非受控组件的基本使用
React 表单受控和非受控组件的基本使用在 React 里,HTML 表单元素的工作方式和其他的 DOM 元素有些不同,这是因为表单元素通常会保持一些内部的 state。受控组件渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。对于受控组件来说,输入的值始终由 React 的 state 驱动。不同的表单项数据处理(受控组件):input、select和textarea处理方式一样将state值绑定到表单原创 2021-04-09 09:28:27 · 279 阅读 · 0 评论 -
react学习9-React 组件间数据传递
组件间数据传递父组件向子组件传值props 属性值是只读的子组件向父组件传值组件的函数形式的属性:父组件定义一个函数,通过子组件标签的属性将该函数传递给子组件,子组件接收到该函数后可以进行调用,调用时可以将子组件的数据通过函数实参传递给父组件非父子组件之间传值redux代码示例:class Parent extends React.Component { state = { total: 0 } handleTotal = (n) =>原创 2021-04-08 09:10:28 · 121 阅读 · 0 评论 -
react学习8-React 事件处理
事件处理事件绑定方式React 事件的命名采用小驼峰式(camelCase),而不是纯小写。使用 JSX 语法时需要传入一个函数作为事件处理函数,而不是一个字符串。// handle为函数名称<button onClick={this.handleClick}>点击</button>handleClick = () => { // 事件函数中的this是组件的实例对象 this.setState({ num: this.state.num + 1原创 2021-04-07 09:15:03 · 95 阅读 · 0 评论 -
react学习7-React 组件的生命周期
组件的生命周期官方图解React 组件的生命周期主要分为三部分:组件创建阶段组件更新阶段组件销毁阶段组件创建阶段(挂载):constructor构造函数仅仅触发一次可以给组件的 this.state 赋值render数据(state和props)的变化会导致render重新执行render方法触发后才会更新页面每次组件更新时 render方法都会被调用。componentDidMount组件完成挂载后触发(组件模板显示到页面后)一般用于初始化组件需要的数据原创 2021-04-06 09:05:29 · 141 阅读 · 0 评论 -
react学习6-React 组件接收数据props和类组件状态state
组件接收数据props必须继承React.Component才可以成为一个类组件render方法的作用:产生组件的模板,属于react的核心api,名称固定必须通过this.props获取父组件传递数据,是只读的,不可以修改。class Nihao extends React.Component { render () { console.log(this.props) let uname = this.props.uname return原创 2021-04-02 09:22:18 · 452 阅读 · 0 评论 -
react学习5-React 组件化开发
React 组件化开发使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。组件,从概念上类似于 JavaScript 函数。它接受任意的入参(即 “props”),并返回用于描述页面展示内容的 React 元素。组件将 UI 拆分为独立可复用的代码片段,并对每个片段进行独立构思(组件接收数据,呈现内容)。组件原则:高内聚,低耦合(方便代码的重用和后期的维护扩展)。定义组件的方式定义组件两种方式:函数组件类组件函数组件:函数原创 2021-04-01 09:13:55 · 187 阅读 · 0 评论 -
react学习4-脚手架create-react-app的基本使用
脚手架create-react-app 的基本使用使用脚手架 create-react-app 可以快速生成一个项目,并且提供友好的开发调试环境。脚手架用法一 :安装脚手架包 create-react-app (全局安装)npm install create-react-app -g使用命令创建项目--use-npm 的作用是使用npm管理依赖包默认情况,如果本地安装了yarn,那么会默认采用yarn进行依赖包管理如果默认没有安装yarn,那么默认使用npm管理依赖包crea原创 2021-03-31 09:11:12 · 293 阅读 · 0 评论 -
react学习3-JSX条件渲染和列表渲染
JSX条件渲染js形式条件渲染function showForm (flag) { // 根据参数flag的状态显示不同内容 if(flag) { // 显示登陆框 return <div>登陆框</div> } else { // 显示注册框 return <div>注册框</div> }}元素变量function showForm (flag) { // 根据参数flag的状态显示不同原创 2021-03-30 09:19:24 · 219 阅读 · 0 评论 -
react学习2-React概述和基本使用
React概述React:是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库(框架)。中文官网英文官网React的特性:声明式视图对于声明式组件,当数据变更的时候,React底层负责高效更新。这种方式代码更加可预见并且更容易调试。组件化封装管理数据的组件,通过组合的方式实现复杂的UI,组件的逻辑采用js实现而不是模板,这样可以保持数据在DOM之外。一次学习,随处编写React可以进行服务端渲染,也可以用于移动APP开发(React Native)。原创 2021-03-29 09:19:25 · 111 阅读 · 0 评论