树灼的博客

React介绍React由Meta公司开发，是一个用于 构建Web和原生交互界面的库 React的优势相较于传统基于DOM开发的优势 组件化的开发方式 不错的性能 相较于其它前端框架的优势 丰富的生态 跨平台支持 React的市场情况全球最流行，大厂必备 开发环境创建create-react-app是一个快速创建React开发环境的工具，底层由Webpack构件，封装了配置细节，开箱即用执行命令： 1npx create-react-app react-basic npx - Node.js工具命令，查找并执行后续的包命令 create-react-app - 核心包（固定写法），用于创建React项目 react-basic React项目的名称（可以自定义）:::warning创建React项目的更多方式https://zh-hans.react.dev/learn/start-a-new-react-project::: JSX基础什么是JSX 概念：JSX是JavaScript和XMl(HTML)的缩写，表示在JS代码中编写HTML模版结构，它是React中构 ...

React表单控制受控绑定 概念：使用React组件的状态（useState）控制表单的状态 12345678910function App(){ const [value, setValue] = useState('') return ( <input type="text" value={value} onChange={e => setValue(e.target.value)} /> )} 非受控绑定 概念：通过获取DOM的方式获取表单的输入数据 123456789101112131415function App(){ const inputRef = useRef(null) const onChange = ()=>{ console.log(inputRef.current.value) } return ( <input ...

安装Electron很慢解决安装Electron应用的依赖时，发现node_modules都已经装完了，但是一直卡在后边electron的安装，其实安装程序会去electron官网下载electron指定版本的程序，所以要加速只有两招： 提前下载好二进制包 设置Electron的环境变量（成功） 只需一行命令npm包管理器： 12npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/npm config set ELECTRON_BUILDER_BINARIES_MIRROR http://npm.taobao.org/mirrors/electron-builder-binaries/ yarn包管理器 12yarn config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/yarn config set ELECTRON_BUILDER_BINARIES_MIRROR http://npm.taobao.org/m ...

Redux介绍 Redux 是React最常用的集中状态管理工具，类似于Vue中的Pinia（Vuex），可以独立于框架运行作用：通过集中管理的方式管理应用的状态 为什么要使用Redux？ 独立于组件，无视组件之间的层级关系，简化通信问题 单项数据流清晰，易于定位bug 调试工具配套良好，方便调试 Redux快速体验1. 实现计数器 需求：不和任何框架绑定，不使用任何构建工具，使用纯Redux实现计数器 使用步骤： 定义一个 reducer 函数 （根据当前想要做的修改返回一个新的状态） 使用createStore方法传入 reducer函数 生成一个store实例对象 使用store实例的 subscribe方法 订阅数据的变化（数据一旦变化，可以得到通知） 使用store实例的 dispatch方法提交action对象 触发数据变化（告诉reducer你想怎么改数据） 使用store实例的 getState方法 获取最新的状态数据更新到视图中 代码实现： 1234567891011121314151617181920212223242526272829303132333 ...

路由快速上手1. 什么是前端路由一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候，path 对应的组件会在页面中进行渲染 2. 创建路由开发环境12345678# 使用CRA创建项目npm create-react-app react-router-pro# 安装最新的ReactRouter包npm i react-router-dom# 启动项目npm run start 3. 快速开始 1234567891011121314151617import React from 'react'import ReactDOM from 'react-dom/client'const router = createBrowserRouter([ { path:'/login', element: <div>登录</div> }, { path:'/article', element: ...

useReducer基础使用作用: 让 React 管理多个相对关联的状态数据 12345678910111213141516171819202122232425262728import { useReducer } from 'react'// 1. 定义reducer函数，根据不同的action返回不同的新状态function reducer(state, action) { switch (action.type) { case 'INC': return state + 1 case 'DEC': return state - 1 default: return state }}function App() { // 2. 使用useReducer分派action const [state, dispatch] = useReducer(reducer, 0) return ( < ...

快速上手Zustand Documentation store/index.js - 创建store123456789101112import { create } from 'zustand'const useStore = create((set) => { return { count: 0, inc: () => { set(state => ({ count: state.count + 1 })) } }})export default useStore app.js - 绑定组件12345678import useStore from './store/useCounterStore.js'function App() { const { count, inc } = useStore() return <button onClick= ...

阶段重点React和TypeScript集合使用的重点集中在 和存储数据/状态有关的Hook函数 以及 组件接口 的位置，这些地方最需要数据类型校验 CRA创建 使用CRA创建项目，并安装必要依赖，包括下列基础包 Redux状态管理 -  @reduxjs/toolkit 、 react-redux 路由 - react-router-dom 时间处理 - dayjs class类名处理 - classnames 移动端组件库 - antd-mobile 请求插件 - axios 配置别名路径1. 背景知识 路径解析配置（webpack），把 @/ 解析为 src/ 路径联想配置（VsCode），VsCode 在输入 @/ 时，自动联想出来对应的 src/下的子级目录 2. 路径解析配置配置步骤： 安装craco 1npm i -D @craco/craco 项目根目录下创建配置文件 1craco.config.js 配置文件中添加路径解析配置 包文件中配置启动和打包命令 3. 联想路径配置配置步骤： 根目 ...

基本安装首先我们创建一个目录，初始化 npm，然后 在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）： 在 webpack4 之后webpack 和webpack-cli 已经分开，需要单独安装 123mkdir webpack-demo && cd webpack-demonpm init -ynpm install webpack webpack-cli --save-dev 注意： 由于npm安装走的是国外的网络，比较慢容易出现安装失败的现象。 可以用yarn安装，首先得全局安装yarn，npm install yarn -g 。 或使用nrm快速切换npm源，首先得全局安装nrm, npm install -g nrm。 nrm 使用：nrm ls 查看可选源。 nrm test npm 测试速度。看哪个快就use哪个。 nrm use cnpm 使用cnpm 。 现在我们将创建以下目录结构、文件和内容： 12345 webpack-demo |- package.json+ |- index.h ...

useState简单场景 简单场景下，可以使用TS的自动推断机制，不用特殊编写类型注解，运行良好 1234const [val, toggle] = React.useState(false)// `val` 会被自动推断为布尔类型// `toggle` 方法调用时只能传入布尔类型 复杂场景 复杂数据类型，useState支持通过泛型参数指定初始参数类型以及setter函数的入参类型 1234567891011type User = { name: string age: number}const [user, setUser] = React.useState<User>({ name: 'jack', age: 18})// 执行setUsersetUser(newUser)// 这里newUser对象只能是User类型 没有具体默认值 实际开发时，有些时候useState的初始值可能为null或者undefined，按照泛型的写法是不能通过类型校验的，此时可以通过完整的类型联合null或者und ...