![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 63
. . . . .
越努力越幸运!
展开
-
React常见知识点
【代码】React常见知识点。原创 2023-09-04 16:32:27 · 1119 阅读 · 0 评论 -
React 之 Suspense和lazy
使用import()动态导入后返回一个promise,但是通过lazy包裹后可以得到一个直接渲染的组件。允许你显示一个退路方案(fallback)直到它的所有子组件完成加载。suspense:n. 焦虑、悬念。原创 2023-08-12 10:56:52 · 1396 阅读 · 0 评论 -
React SSR
React SSR原创 2023-02-19 15:25:25 · 451 阅读 · 0 评论 -
React 顶层 API
React顶层API原创 2023-02-19 14:26:50 · 78 阅读 · 0 评论 -
React key设置
React key 三目运算符 逻辑与运算原创 2023-02-02 14:29:58 · 128 阅读 · 0 评论 -
React核心思想
代数效应原创 2022-09-04 16:42:08 · 360 阅读 · 0 评论 -
React父子组件渲染顺序
import React, { Component } from 'react';class Children extends Component { constructor(props) { super(props); console.log('son constructor'); } componentDidMount() { console.log('son mounted') } render() {原创 2022-04-12 23:01:25 · 1726 阅读 · 0 评论 -
redux-thunk 源码解读
不用redux-thunk之前// store.jsimport { createStore } from 'redux';export const reducer = (state = { count: 0}, action) => { switch(action.type) { case 'CHANGE_DATA': { return { ...state, count原创 2022-04-04 18:36:59 · 401 阅读 · 1 评论 -
ReactHook - 自定义hook以及hook生态圈
自定义hook所有的hook函数,以use开头,因此,自定义也需要use开头;相对复杂的hook需要用到useReducer;原创 2022-02-07 19:11:56 · 280 阅读 · 0 评论 -
ReactHook - 其他hook
1. useRefuseContext参考:https://blog.csdn.net/yexudengzhidao/article/details/118076960原创 2022-02-07 17:42:40 · 333 阅读 · 0 评论 -
React性能优化-PureComponent、React.memo、useMemo、useCallback
参考官网链接:https://zh-hans.reactjs.org/docs/react-api.html#overviewReact.PureComponent用在class组件中用:React.PureComponent 与 React.Component 很相似。两者的区别在于 React.Component 并未实现 shouldComponentUpdate(),而 React.PureComponent 中以浅层对比 prop 和 state 的方式来实现了该函数。如果赋予 React原创 2021-06-27 09:35:54 · 413 阅读 · 1 评论 -
React Context上下文
参考链接: Context原创 2021-06-20 23:17:05 · 251 阅读 · 2 评论 -
React-router
认识react-router:通过不同的地址,渲染不同的组件,简化单页面应用的编写。react-router相关四大组件:react-router:核心库react-router-dom: 给网页版用的react-router-native:react-native用的react-router-config: 静态配置辅助库...原创 2021-06-14 09:53:27 · 132 阅读 · 0 评论 -
Redux状态管理笔记
注意: 在redux里会要求返回一个全新的state出来,原因是处于性能考虑,如果改变了某个属性,redux还需要去一个个对比是哪个属性发生了变化,而对于一个大型的数据结构来说,做深度检查是及其好性能的,所以redux选择了返回一个新的对象的方式。(创建一个对象的方式比做深度的对比性能要开销的小的多)。计算机中如果有一些事情不能理解,要么就是出于性能,要么就是出于安全性考虑的reducer是一个函数,在createStore的时候会自动执行一次。store的两个方法:store.getStat.原创 2021-06-11 08:44:35 · 1064 阅读 · 1 评论 -
React高阶组件
React 高阶组件redux 中间件React-router用JavaScript跳转路由:受控组件 VS 非受控组件portalcontext原创 2020-12-07 08:46:11 · 153 阅读 · 0 评论 -
ReactHook - useEffect
一. useEffect作用:推迟代码执行渲染完成之后再执行,常用于 数据读取完成移除定时器、监听第二个参数来模拟生命周期。useEffect存在一种bail out(保释)机制:当你尝试设置相同的状态,不会渲染,也不会触发effect设置了相同state:“补救”——仅仅让你把函数执行完,不会真的渲染、也不会执行effect又设置了相同state——没有setStatestate设置重复的值——只会重复渲染一次 +1例如:useEffect——cl原创 2020-11-04 00:48:07 · 1179 阅读 · 1 评论 -
React Hook-useState
一. 认识函数组件class组件——功能全、东西多;麻烦函数组件——功能弱、东西少;方便函数组件:1.状态——能变的、重新渲染class √fc × hook2.this——当前实例class √fc ×3.ref——引用class √fc × hook4.方法class √fc × hookhook:一套工具函数的集合——增强fc的功能函数组件专用的二.原创 2020-08-10 08:37:53 · 1646 阅读 · 1 评论 -
React学习记录
React 中的函数式思想:https://zhuanlan.zhihu.com/p/24700702原创 2020-06-16 10:47:10 · 147 阅读 · 0 评论 -
React中的this.props.children
1、this.props对象的属性与组件的属性是一一对应的,但是有一个例外就是this.props.children属性,它表示组件的所有子节点:var NotesList = React.createClass({ render: function() { return ( <ol> { React.Children.map(this.props.children, fun原创 2020-05-25 00:04:53 · 519 阅读 · 0 评论 -
React渲染的时候采坑记,一定要return给render
React采坑记今天在用策略模式改写代码的时候,本来想简化一下代码,将渲染组件抽离出去,不料踩了一个小坑。虽然在函数里返回了内容,但是render()也是一个函数,所以也需要return内容原代码如下:<div id='wrapper'> { this.props.data.map((item, index) => { if (item.template === 'grid' && this.props.repo原创 2020-05-22 16:03:01 · 2302 阅读 · 0 评论 -
redux中如何让一个action的方法触发另一个action的方法
一定要用dispatch包裹,否则不会触发方法return dispatch => {}的代码通过dispatch()将想要触发的方法包裹起来,dispatch检测到方法就会执行它export default handleGet (data) { return dispatch => { axios.get(list).then() ... }}export default handlePost (data) { return d转载 2020-05-12 13:31:53 · 1589 阅读 · 0 评论 -
React-router5.x 路由的使用及配置
官方文档在 React router 中通常使用的组件有三种:路由组件(作为根组件): BrowserRouter(history模式) 和 HashRouter(hash模式)路径匹配组件: Route 和 Switch导航组件: Link 和 NavLink关于路由组件,如果我们的应用有服务器响应web的请求,建议使用<BrowserRouter>组件; 如果使用静态...转载 2020-04-26 23:33:03 · 1991 阅读 · 1 评论 -
React 改变state必须知道的知识点
react可以通过this.state.xx的方式直接获取state,但是当我们修改state的时候,往往有许多的坑。1. 不能直接修改state组件修改state,并不会重新触发render。例如: //错误this.state.title='attend';//正确this.setState({title:'attend'});2. state的更新是异步的调用setSta...转载 2020-01-07 20:25:39 · 1317 阅读 · 0 评论 -
Warning: A component is changing an uncontrolled input of type text to be controlled 报错分析
报错信息:Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a con...转载 2020-01-02 18:31:36 · 2097 阅读 · 0 评论 -
React中循环遍历数组时map和forEach的区别
map函数返回一个新的数组,在map的回调函数里,迭代每一项的时候也必须有返回值。forEach 没有返回值forEach情况import React, { Component } from "react"import ListItem from './ListItem'class TodoList extends Component { constructor(props)...原创 2020-01-02 17:55:09 · 6514 阅读 · 0 评论 -
React16.4开发简书项目 React高级内容
本章讲解React高级部分内容,包含PropTypes,生命周期函数,虚拟Dom,数据mock,动画实现等部分课程讲解。一.1.1 类型校验和默认值。1.2 什么是虚拟DOM生成真正的DOM需要调用很多底层的东西,很耗性能,而且真实DOM的对比也很耗性能,而虚拟DOM则是JavaScript模拟的DOM,所以对于生成和对比,性能会很大程度上提高。1.3 深入理解虚拟DOM1.4 ...原创 2020-01-28 17:38:52 · 520 阅读 · 0 评论 -
React16.4开发简书项目 React初探(二)
本章主要讲解React项目的开发环境搭建,工程代码结构及React中最基础的语法内容,同时对前端组件化思想进行介绍。一. 基础 import registerServiceWorker from './registerServiceWorker'; registerServiceWorker();PWA: progressive web application在HTTPS协议的服...原创 2020-01-28 17:29:08 · 168 阅读 · 0 评论 -
React16.4开发简书项目 课程导学(一)
React16.4开发简书项目 从零基础入门到实战:https://coding.imooc.com/class/chapter/229.html#Anchor本章主要介绍学习react的重要性,课程的知识大纲,学习前提,讲授方式及预期收获。一. 课程导学1.1 涉及的知识点:1.2 收获:...原创 2020-01-28 17:31:45 · 459 阅读 · 0 评论 -
Redux之bindActionCreators方法
bindActionCreators的作用是将一个或多个action和dispatch组合起来生成mapDispatchToProps需要生成的内容。参考链接:https://www.jianshu.com/p/26356a9c5365原创 2019-12-12 18:10:42 · 515 阅读 · 0 评论 -
react-redux框架之connect()与Provider组件 用法讲解
react-redux在react-redux框架中,给我提供了两个常用的API来配合Redux框架的使用,其实在我们的实际项目开发中,我们完全可以不用react-redux框架,但是如果使用此框架,就如虎添翼了。我们来简单聊聊这两个常用的APIconnect()Provider 组件React-Redux 将所有组件分成两大类:UI 组件(presentational compon...转载 2019-12-12 16:47:12 · 630 阅读 · 0 评论 -
关于对象的解构赋值后内容修改避免深拷贝的做法
上面一段代码在react中很常见,进行对象解构赋值后的代码为:return { count: 1, count: state.count+1}说明:由于这个返回的对象的key值相同,所以后面的把前面的替换掉了。由于返回的是一个{ },所以返回的也是一个深拷贝后的对象。进一步扩展在React的store中的对象里,会存在很多个key、value,那么,当我们修改其中一个值并返...原创 2019-12-11 14:33:34 · 908 阅读 · 0 评论 -
React中的this.props.children
一. this.props.children用法this.props.children表示组件的所有子节点。1.1import React from 'react';import Page from './components/Page'function App() { return ( <Page> <div>hh</div>...原创 2019-12-04 13:27:26 · 1155 阅读 · 0 评论 -
Redux进阶(一)
一. Redux-thunk中间件的安装和配置Redux-thunk是Redux最常用的插件。那什么时候会用到这个插件呢?比如在Dispatch一个Action之后,到达reducer之前,进行一些额外的操作,就需要用到middleware(中间件)。在实际工作中你可以使用中间件来进行日志记录、创建崩溃报告,调用异步接口或者路由。 这个中间件可以使用是Redux-thunk来进行增强(当然你也可...原创 2019-12-02 17:36:02 · 265 阅读 · 0 评论 -
Redux基础(三)
一. 工作中写Redux的小技巧-11.1 把Action Types 单度写入一个文件写Redux Action的时候,我们写了很多Action的派发,产生了很多Action Types,如果需要Action的地方我们就自己命名一个type,会出现两个基本问题:这些Types如果不统一管理,不利于大型项目的使用。因为Action里的type,一定要和reducer里的type一一对应在...原创 2019-12-02 16:55:47 · 156 阅读 · 0 评论 -
Redux基础(二)
一. 创建Redux中的仓库store和reducer从Redux的工作流图中可以看出,Redux工作流程中有四个部分,最重要的就是store这个部分,因为它把所有的数据都放到了store中进行管理。在编写代码的时候,因为重要,所以要优先编写store。1.1 编写创建store仓库在使用Redux之前,需要先用npm install来进行安装,打开终端,并进入到项目目录,然后输入。(如果你...原创 2019-11-29 19:38:16 · 148 阅读 · 0 评论 -
Redux起步(一)
一. Redux介绍Redux是一个用来管理数据状态和UI状态的JavaScript应用工具。随着JavaScript单页应用(SPA)开发日趋复杂,JavaScript需要管理比任何时候都要多的state(状态),Redux就是降低管理难度的。(Redux支持React,Angular、jQuery甚至纯JavaScript)从图中可以看出,如果不用Redux,我们要传递state是非常麻...原创 2019-11-29 11:54:26 · 122 阅读 · 0 评论 -
React高级(八) 动画相关
一. react-transition-groupReact有着极好的开发生态,开发需要的任何基本需求都可以找到官方或大神造的轮子,动画这种必不可少的东西当然也不例外,React生态中有很多第三方的动画组件,react-transition-group是react官方提供的动画过渡库,有着完善的API文档 ,可以满足日常动画开发需求。1.1 安装react-transition-group...原创 2019-11-27 17:11:24 · 167 阅读 · 0 评论 -
React高级(七)
一. axios数据请求ajax是可以远程请求数据的,但是写起来太麻烦,我们可以用封装好的ajax请求库Axios来实现。1.1 安装Axios通过npm安装好Axios后,我们会发现在通过create-react-app 创建的项目结构中的package.json文件中,并没有找到我们安装好的依赖,原因是create-react-app又进行了封装,参考如下:react脚手架create-...原创 2019-11-27 16:05:08 · 173 阅读 · 0 评论 -
React高级(六)
一. React 生命周期通过这张图你可以看到React声明周期的四个大阶段:Initialization:初始化阶段。Mounting: 挂载阶段。Updation: 更新阶段。Unmounting: 销毁阶段什么是生命周期函数如果非要用一句话把生命周期函数说明白,我觉的可以用这句话来说明:生命周期函数指在某一个时刻组件会自动调用执行的函数1.1 Initializa...原创 2019-11-26 17:45:08 · 257 阅读 · 1 评论 -
React高级(五)
一. 调试工具的安装及使用React在浏览器端是有一个调试工具的,这就是React developer tools,它会比console.log()方便很多。1.1 React developer tools的三种状态React developer tools有三种颜色,三种颜色代表三种状态:灰色:说明页面不是由React编写的,不可使用该插件。黑色: 说明页面是用React编写的,并...原创 2019-11-26 15:42:22 · 170 阅读 · 0 评论