React共19篇

什么是React的受控组件和非受控组件?

什么是React的受控组件和非受控组件?-速码派
在React里处理表单,你很快就会遇到这两个概念。它们指的是管理表单数据(比如input、textarea、select的值)的两种不同方式。选哪种,取决于你想要多少控制权。 受控组件:数据由React完全掌控...
MRzhang的头像-速码派MRzhang2026年1月25日
05212

如何优化React组件性能?

如何优化React组件性能?-速码派
React本身很快,但如果你不小心,组件不必要的重复渲染会把性能拖慢。优化React性能,核心思路就是一句话:避免做不必要的工作。这主要围绕组件的重新渲染展开。 用React.memo包裹函数组件 默认...
MRzhang的头像-速码派MRzhang2026年1月25日
0505

如何创建React组件?

如何创建React组件?-速码派
在React里,一切皆组件。这就像玩乐高,你把一个个小模块搭起来,最后变成整个应用。创建组件主要有两种方式:函数组件和类组件。现在大家更爱用函数组件,因为它写起来简单,再配上Hooks,功能...
MRzhang的头像-速码派MRzhang2026年1月25日
0498

什么是React的合成事件?

什么是React的合成事件?-速码派
在React里写onClick、onChange这些事件处理的时候,你有没有想过,它跟直接在HTML里写onclick是不是一回事?其实不是。React自己搞了一套事件系统,叫“合成事件”。它把浏览器的原生事件包装了...
MRzhang的头像-速码派MRzhang2026年1月25日
04610

什么是React的高阶组件?

什么是React的高阶组件?-速码派
在React的世界里,高阶组件是一种有点“老派”但非常重要的代码复用模式。它的英文是Higher-Order Component,大家习惯叫HOC。你可以把它理解成一个“组件工厂”,或者一个“包装器”。它本身不...
MRzhang的头像-速码派MRzhang2026年1月25日
0466

useState和useReducer有什么区别?

useState和useReducer有什么区别?-速码派
在React函数组件里管理状态,useState是你的老朋友,简单直接。但当状态逻辑变得复杂,一堆setState挤在一起互相影响时,useReducer就该登场了。它俩都能管状态,但脾气和适用场景很不一样。 us...
MRzhang的头像-速码派MRzhang2026年1月25日
0469

如何自定义Hook?

如何自定义Hook?-速码派
自定义Hook大概是React Hooks最迷人的特性了。它让你能把组件里那些纠缠在一起的逻辑抽出来,变成一个独立、可复用的函数。这可不是什么高阶组件或者渲染属性那种绕弯子的复用,而是最直接的函...
MRzhang的头像-速码派MRzhang2026年1月25日
0396

React中如何实现条件渲染?

React中如何实现条件渲染?-速码派
写React组件时,一个最常见的场景就是根据某些条件来决定显示什么内容。用户登录没登录、数据加载没加载完、表单是编辑模式还是查看模式,这些都需要条件渲染。React提供了好几种方式来实现,它...
MRzhang的头像-速码派MRzhang2026年1月25日
03414

React类组件和函数组件的区别?

React类组件和函数组件的区别?-速码派
在React的世界里,类组件和函数组件是构建UI的两种主要方式。它们都能完成任务,但写法和背后的哲学截然不同。理解它们的差异,能帮你更好地选择什么时候该用什么,尤其是在今天Hooks已成主流的...
MRzhang的头像-速码派MRzhang2026年1月25日
0337

React中key的作用是什么?

React中key的作用是什么?-速码派
在React里渲染列表时,你肯定见过那个经典的警告:“Each child in a list should have a unique ‘key’ prop”。很多人只是随便加个key={index}把警告消掉就算了。但key的作用远不止于此,它...
MRzhang的头像-速码派MRzhang2026年1月25日
0329