![](https://img-blog.csdnimg.cn/20210701183043726.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
文章平均质量分 73
React是用于构建用户界面的JavaScript库, [1] 起源于Facebook的内部项目,该公司对市场上所有 JavaScript MVC框架都不满意,决定自行开发一套,用于架设Instagram的网站。于2013年5月开源。
猫老板的豆
旁观自己 善待朝夕
展开
-
React 扩展
Render props是一种在React组件之间共享代码的模式。一个组件接收一个返回React元素的函数作为prop,并在其渲染方法中调用该函数。这使得父组件能够动态地决定子组件应该渲染什么内容。返回 false,则 React 不会触发组件的重新渲染过程,这可以避免不必要的渲染和可能带来的性能开销。Vue.js的插槽允许你在子组件的模板中预留一些占位符,这些占位符可以由父组件来填充内容。然而,React通过其组合和props传递的特性,提供了类似的功能,但实现方式略有不同。内部的两个节点插入到。原创 2024-06-24 17:04:53 · 1008 阅读 · 0 评论 -
React组件通信方式总结
Redux 是一个用于管理 JavaScript 应用程序中状态(state)的库,它提供了一种可预测的方式来更新应用程序的状态,类似 Vue 中的。:父组件维护一个状态(state),这个状态将被传递给两个兄弟组件。无论是类组件还是函数式组件,父组件向子组件传递数据的方式都是使用。无论是类组件还是函数式组件,子组件向父组件传递数据的方式都是通过。例如:组件为父组件,B组件为子组件,C组件为孙子组件,现在通过。:(即:组件A是订阅者,组件B是发布者,先订阅再发布)),然后在组件树中的某个位置。原创 2024-06-11 15:56:23 · 748 阅读 · 0 评论 -
React 18
有时,npm 或 yarn 的缓存可能会导致问题。你可以尝试清理缓存并重新安装或者检查是否有多个版本的 Node.js或简写或简写使用命令来创建一个新的React项目。例如,如果你想要创建一个名为进入目录:cd my-react-app运行项目:yarn start。原创 2024-06-07 18:11:39 · 545 阅读 · 0 评论 -
React 组件三大核心 ref、state、props
虽然 PropTypes 是在开发时使用的,并且不会影响生产环境的代码,但它是一个很好的实践,因为它可以帮助你确保组件的 props 符合预期的格式和类型,从而减少了因 prop 类型错误导致的运行时错误。这意味着在并发模式下,调用 setState 后,React 不会立即更新组件的状态,而是将这个更新排队,并在后续的渲染中应用。在React中,state 是一个JavaScript对象, 是组件中存储和管理数据的一种方式。) 中是异步的,这里说的异步实际上是react的批量更新,达到了提升性能的目的。原创 2024-05-23 14:50:12 · 486 阅读 · 0 评论 -
Redux之useSelector、useDispatch
函数式组件中利用 `useSelector`、`useDispatch`等HooksApi替代`connect(mapStateToProps, mapDispatchToProps)`的使用方法原创 2022-04-26 16:39:07 · 1137 阅读 · 0 评论 -
Redux详解
Redux 是一个专门用于状态管理的JS库(不是 React 插件库)。可以理解为全局数据状态管理工具(状态管理机),用来做组件通信等。集中式管理 React 应用中多个组件共享的状态。类似与vue的状态管理vuex你可能不需要 Redux首先明确一点,Redux 是一个有用的架构,但不是非用不可。事实上,大多数情况,你可以不用它,只用 React 就够了。鲁迅(∩_∩) 曾经说过:“如果你不知道是否需要 Redux,那就是不需要它。原创 2022-04-21 15:01:49 · 1532 阅读 · 0 评论 -
React Hooks 之 useContext
在父组件中定义:import React from 'react';import ReactDOM from 'react-dom';import App from './App';const defaultValue = { // defaultValue为共享的默认数据 username: 'bing'}export const appContext = React.createContext(defaultValue); // 创建一个上下文的容器(组件)ReactDOM原创 2022-04-18 15:38:14 · 839 阅读 · 0 评论 -
React Hooks 之 useEffect
简介纯函数给一个函数同样的参数,那么这个函数永远返回同样的值。副作用副作用与纯函数相反,指一个函数处理了与返回值无关的事情。输入参数一样,而输出结果不确定的情况就是副作用。纯函数中没有副作用,有副作用的不是纯函数。React中的副作用有:state状态的改变、生命周期、构建函数…函数式组件中使用useEffect处理副作用使用1. 当第二个参数为一个非空数组时会在count值发生变化时调用(相当于vue中的watch)useEffect(() => { docum原创 2022-04-15 17:22:34 · 1189 阅读 · 0 评论 -
CSS in JS之React-Emotion
emotion 是一个 JavaScript库 ,使用 emotion 可以用写 js 的方式写 css 代码(CSS in JS)。在react中安装emotion后,可以很方便进行css的 封装,复用。使用emotion后,浏览器渲染出来的标签是会加上一个css开头的标识。如下:截图中以css-开头的几个标签,就是使用emotion库后渲染出来的。安装安装两个库:yarn add @emotion/reactyarn add @emotion/styled使用1. 引入emot.原创 2022-03-02 15:39:30 · 1732 阅读 · 0 评论 -
React国际化react-i18next
简介react-i18next 是基于 i18next 的一款强大的国际化框架,可以用于 react 和 react-native 应用,是目前非常主流的国际化解决方案。i18next 有着以下优点:基于i18next不仅限于react,学一次就可以用在其它地方提供多种组件在hoc、hook和class的情况下进行国际化操作适合服务端的渲染历史悠久,始于2011年比大多数的前端框架都要年长因为历史悠久所以更成熟,目前还没有i18next解决不了的国际化问题有许多插件的支持,比如可以用插件.原创 2021-10-20 16:10:12 · 5662 阅读 · 5 评论 -
React Router 路由详解
React 本身并不直接包含路由功能,路由功能通常是通过第三方库(如 )来实现的。 是 React 中最常用的路由库之一,它允许在 React 应用程序中创建单页应用程序(SPA)风格的导航。注意:用于在应用中创建链接,这些链接指向不同的路由(即 URL 路径)。当用户点击链接时,会触发页面跳转。相当于 标签相当于 Vue 中的 NavLink类似于 Link,但允许指定一个“激活”状态时的样式,激活时会自动添加一个类名(默认为 )到该链接上。也可以通过 属性自定义激活时应用的类名Redirect原创 2021-10-18 17:18:14 · 1581 阅读 · 0 评论 -
Vite创建React项目
文章目录1. 输入项目名称2. 选择框架3. 选择不同4. 项目创建完成5. 项目结构6. 启动项目Vite 需要 Node.js 版本 >= 12.0.0。(node -v 查看自己当前的node版本)使用 yarn:yarn create @vitejs/app使用 npm:npm init @vitejs/app1. 输入项目名称这里输入我们的项目名称:vite-react2. 选择框架这里选择我们需要集成的框架:reactvanilla:原生js,没有任何框架集原创 2021-09-16 14:45:16 · 5277 阅读 · 0 评论 -
React18 生命周期
文章目录生命周期顺序Mounting 挂载顺序Updation 更新顺序Unmounting 卸载注意生命周期1. constuctor2. componentWillMount(废弃)3. static getDerivedStateFromProps(新增)4. render5. componentDidMount版本迁移在17版本中废除的生命周期有:componentWillMount,componentwillReceiveProps,componentWillUpdate新增的生命周期原创 2021-09-02 18:04:09 · 891 阅读 · 0 评论 -
React17 入门
文章目录ref生命周期(针对于组件而言)Mounting 挂载Updation 更新Unmounting 卸载注意CSSTransition 动画库安装使用Ant Design UI库安装使用Redux安装原则核心API具体用法store/list.jsstore/actionCreator.jsstore/index.jsstore/reducer.jsRedux-thunk中间件安装使用store/index.jsTodoList.jsstore/actionCreator.jsstore/reduc原创 2021-09-01 16:55:42 · 843 阅读 · 0 评论 -
Taro中使用Redux ( 结构最简 )
简介在 Taro 中可以自由地使用 React 生态中非常流行的数据流管理工具 Redux 来解决复杂项目的数据管理问题。以下是项目中 结构最简化 的实例效果,完整结构请参考官方文档安装中间件yarn add redux react-redux redux-thunk redux-logger或npm install --save redux react-redux redux-thunk创建Store在项目 src 目录下新增一个 store 目录,并新增index.js、action原创 2021-07-22 17:47:01 · 1226 阅读 · 3 评论 -
React之React-Redux
## Redux 与 React-Redux 区别与`redux`比较,`React-redux`更为简洁,只要在`mapStateToProps`中绑定的`state`或者`action`就直接可以在组件的`props`中获取到,这样`state`与`action`在`mapStateToProps`统一管理,使用起来很方便。更重要的是,`React-Redux`自己会监听`state`的变化进行更新,而`redux`需要手动的在生命周期`componentDidMount`中通过`store.su原创 2021-07-08 18:34:27 · 306 阅读 · 0 评论 -
Redux-saga中间件
Redux-saga中间件安装npm install redux-saga --save或yarn add redux-saga使用1. 创建、使用、运行Redux-saga中间件src/store/index.jsimport { createStore, applyMiddleware, compose } from 'redux';import thunk from 'redux-thunk';import createSagaMiddleware from 'redux-sag原创 2021-07-08 15:58:42 · 228 阅读 · 0 评论 -
Redux-thunk中间件
Redux-thunk可以使action可以返回函数,从而在store/actionCreator.js中可以进行异步请求(axios)安装npm install redux-thunk或yarn add redux-thunk使用store/index.jsimport { createStore, applyMiddleware, compose } from 'redux';import thunk from 'redux-thunk';import reducer from '.原创 2021-07-02 17:34:45 · 291 阅读 · 0 评论