React
文章平均质量分 62
React
花铛
这个作者很懒,什么都没留下…
展开
-
《十四》React Hooks 之自定义 Hooks
在多个组件中使用相同的 Hook 不会共享 state。自定义 Hook 是一种重用状态逻辑的机制,所以每次使用自定义 Hook 时,其中的所有 state和副作用都是完全隔离的。自定义 Hook 本质上只是一个对代码逻辑进行抽取的函数,严格意思上来说,它本身并不是 React 的特性。需求:在组件创建和销毁的时候都进行打印。就可以将这部分的逻辑抽取成一个自定义的 Hook。自定义 Hook 的名称应该始终以 use 开头,除此之外不需要具有任何其他特殊的标识。在其内部可以调用其他的 Hook。原创 2023-02-17 10:34:07 · 9319 阅读 · 0 评论 -
《十三》React Hooks 其他常用的钩子
使用前:点击按钮,onClick 事件绑定的处理函数被回调,修改 State 的值后,会触发了函数组件的重新渲染。函数组件每次重新渲染,都会创建一个新的事件处理函数,造成性能的浪费。// 修改 count 的值后,会触发了函数组件的重新渲染,创建一个新的 handleCountChange 函数return ({/* 点击按钮,onClick 事件绑定的处理函数被回调 */}使用后:不论函数组件重新渲染几次,在依赖不变的情况下,原创 2023-02-10 17:02:06 · 169 阅读 · 0 评论 -
《八》React.PureComponent & React.memo()
和都是用来控制组件的重新渲染的,用于优化性能。适用于类组件,适用于函数组件。原创 2021-08-31 18:34:51 · 233 阅读 · 0 评论 -
《四》组件中的 State、props、Ref
组件实例的有三大核心属性:State、Props、Ref。类组件中这三大属性都存在。函数组件没有实例对象。但由于函数可以接收参数,因此有 Props 属性,但是依然没有 State、Ref 属性(在没有 Hooks 的情况下)。原创 2021-08-12 17:55:38 · 774 阅读 · 0 评论 -
《六》组件通信之使用 Props 进行父子组件间通信
父组件中,通过给子组件绑定 的方式来给子组件传递数据;子组件中,通过 props 参数来获取父组件传递过来的数据。子组件主动触发父组件的方法,向父组件传递数据:父组件通过 props 给子组件传递一个回调函数,子组件调用这个函数向父组件传递数据。原创 2021-08-12 17:58:01 · 581 阅读 · 2 评论 -
《五》组件的生命周期
组件从创建到销毁的过程,被称为组件的生命周期。在没有 Hooks 之前,函数组件没有生命周期,因为生命周期函数是 React.Component 类的方法实现的,函数组件没有继承 React.Component,所以也就没有生命周期。在生命周期的各个阶段都有相对应的钩子函数,会在特定的时机被调用,被称为组件的生命周期函数。生命周期函数 = 生命周期钩子 = 生命周期回调函数 = 生命周期钩子函数。原创 2021-08-12 17:56:56 · 19230 阅读 · 1 评论 -
React 中的错误边界
部分 UI 的 JavaScript 错误不应该导致整个应用崩溃,为了解决这个问题, React 16 引入了一个新的概念:错误边界。错误边界是一种 React 组件,这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误,并且它会渲染除备用 UI,而不是渲染那些崩溃了的子组件树。如果一个 class 组件中定义了 static getDerivedStateFromError()或componentDidCatch()这两个生命周期方法中的任意一个或两个时,那么它就变成了一个错误原创 2021-04-01 09:38:54 · 527 阅读 · 0 评论 -
《十一》严格模式 React.StrictMode
严格模式可以为其后代元素触发额外的检查和警告,仅在开发模式下运行,不会影响生产构建。本质上也是一个组件,自身不会渲染成任何可见的 UI。原创 2021-03-29 16:39:36 · 495 阅读 · 0 评论 -
ReactDOM
如果使用 <script> 标签引入 React,所有的顶层 API 都能在全局 ReactDOM 上调用。如果使用 npm 和 ES6,可以用 import ReactDOM from ’react-dom'。如果使用 npm 和 ES5,可以用 var ReactDOM = require('react-dom')。方法:render():ReactDOM.render(element, container[, callback]):在提供的 container 里渲染一个 Rea原创 2021-03-29 16:07:07 · 362 阅读 · 0 评论 -
《十》高阶组件
高阶组件也有其缺点:HOC 需要对原组件进行包裹,如果大量使用 HOC,将会产生非常多的嵌套,会让调试变得困难;而且 HOC 可以劫持 pros,在不遵守约定的情况下可能会造成 props 的冲突。,简称 HOC,就是参数为组件,返回值为新组件的函数。高阶组件对原组件进行了一层拦截,就可以对原组件进行各种增强了。高阶组件并不是 React API 的一部分,而是一种基于 React 的组合特性而形成的设计模式。高阶组件的实现案例:通过高阶组件为自定义组件统一注入用户信息作为其 props。原创 2021-02-26 09:32:36 · 986 阅读 · 0 评论 -
《七》组建通信之使用 Context 进行祖孙组件间通信
Context:提供了一种不必显示地通过组件树逐层传递 props,就可以在组件之间共享数据的方式。常用于祖先组件与后代组件间通信。需要谨慎使用,因为这会使得组件的复用性变差。原创 2021-02-24 11:41:30 · 324 阅读 · 0 评论 -
《十二》React Hooks 基础和最重要的钩子
针对上面出现的情况,开发者通常都会编写类组件。但是类组件也存在自己的问题,简而言之,就是类组件比较复杂,学习成本和编写成本都比较高。Hooks 的出现,可以解决上面提到的问题。Hooks 是 React V16.8 新增的特性。原创 2021-02-20 17:05:48 · 480 阅读 · 0 评论 -
React 中使用 Less
在 React 项目中使用 Less 需要进行 Webpack 相关的配置。原创 2021-02-23 11:32:50 · 628 阅读 · 0 评论 -
React 中 CSS 的解决方案
React 官方对样式如何定义并没有明确的态度。原创 2021-02-20 10:42:41 · 1025 阅读 · 0 评论 -
《九》受控组件和非受控组件
在 React 中,HTML 表单的处理方式和普通的 DOM 元素不太一样。React 有两种不同的方式来处理表单输入元素:受控组件和非受控组件。原创 2021-01-13 17:12:51 · 150 阅读 · 0 评论 -
react-transition-group 过渡动画库
库可以帮助开发者方便地实现组件进入和退出的过渡动画。React 曾为开发者提供过动画插件,后来改由社区维护,形成了现在的库。原创 2021-01-13 16:14:49 · 610 阅读 · 0 评论 -
React 脚手架修改 Webpack 配置的两种方案
在 React 脚手架的基础上进行 Webpack 配置。弹出 Webpack 配置信息,直接修改。使用 craco (原创 2019-03-13 11:25:14 · 637 阅读 · 1 评论 -
《一》React 基础
基于 React V18。React 是 Facebook 开发的一个用于构建用户界面的 JavaScript 库。原创 2020-12-28 11:23:11 · 459 阅读 · 0 评论 -
(X)事件
React 元素的事件处理和 DOM 元素类似,但是有一点语法上的不同:React 事件绑定属性的命名采用驼峰式写法,而不是小写。如果采用 JSX 的语法需要传入一个函数作为事件处理函数,而不是一个字符串。React 根据 W3C规范定义了e,所以不需要担心跨浏览器的兼容性问题。在 React 中,使用return false不能阻止默认行为,必须明确调用 e.preventDefault ()。// HTML 通常写法是:<button onclick="activateLase原创 2020-12-28 11:02:28 · 497 阅读 · 0 评论 -
《三》组件
React 组件的名称必须大写,如果是小写 React 会将其视为 HTML 元素。类组件:使用 class 来进行定义,且必须继承 React 的内置组件 Component,内部还需实现render()方法以返回需要渲染的内容。// 定义类组件// 必须定义一个 render() 方法,返回的内容会被 root.render() 渲染出来}}// 渲染类组件,每渲染一次类组件就是 new 一次类组件。原创 2020-12-28 10:46:35 · 446 阅读 · 0 评论 -
《二》React 中的 JSX 语法
JSX 全称是 JavaScriptXML,是一种类似于 XML 的 JavaScript 扩展语法。它允许 HTML 与 JavaScript 的混写,HTML 可以直接写在 JavaScript 之中。遇到 HTML 标签(以原创 2020-12-26 18:07:31 · 579 阅读 · 0 评论