React共17篇

什么是React的Portal?

什么是React的Portal?-速码派
在React里,组件的JSX结构通常决定了DOM的嵌套关系。但有时你会遇到一个棘手的问题:一个组件在逻辑上属于某个父组件,但在DOM结构里,它需要被“挂”到另一个完全不同的地方去。最常见的例子就...
MRzhang的头像-速码派MRzhang2026年1月25日
03015

React中如何实现条件渲染?

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

React中如何实现列表渲染?

React中如何实现列表渲染?-速码派
处理数组数据并把它变成一列动态的DOM元素,这在前端开发里就像吃饭喝水一样常见。无论是用户列表、商品目录还是消息时间线,都需要列表渲染。在React里,这事儿主要靠数组的map方法,再加上一...
MRzhang的头像-速码派MRzhang2026年1月25日
02713

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

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

如何错误边界(Error Boundaries)?

如何错误边界(Error Boundaries)?-速码派
在React里,如果组件在渲染过程中、生命周期方法里或者子组件的构造函数里抛出了JavaScript错误,整个组件树会从根部开始“溃散”,导致白屏。这体验很糟糕。错误边界就是React提供的一种组件,...
MRzhang的头像-速码派MRzhang2026年1月25日
03211

什么是React的合成事件?

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

什么是React的上下文(Context)?

什么是React的上下文(Context)?-速码派
在React里,数据通常通过props从上往下传。但如果组件树很深,中间每一层都得帮忙传一下props,这就很烦人,像“prop drilling”(属性钻取)。React的Context(上下文)就是为了解决这个痛点,...
MRzhang的头像-速码派MRzhang2026年1月25日
02510

React中key的作用是什么?

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

如何创建React组件?

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

什么是React的Ref?怎么用?

什么是React的Ref?怎么用?-速码派
在React的数据流世界里,ref是一个有点特别的逃生口。它让你能直接访问DOM元素或者React组件实例,跳过props和state的那套更新机制。简单说,ref就是你通向真实DOM或组件实例的一根“直达线”。...
MRzhang的头像-速码派MRzhang2026年1月25日
0268