React踩坑笔记 —— React
Webpack提供了自己的导入方式require.include,但同时也支持commonjs规范或AMD规范的require语法,而Node.js使用的就是common.js,ES6的语法Import也会被Babel转化成commonjs格式或者是AMD格式。
ES6、CommonJS的导入是单例的;
单页应用默认直接加载出所有import的资源,所以:
JS中的全局调用和表达式总会一开始就被执行,可以使用require()/import()语法实现动态加载、按需加载。可以配合Lazy(https://reactjs.org/docs/code-splitting.html#reactlazy)实现React组件懒加载 —— Lazy的原理即Promise+高阶组件,在组件异步加载完成后将解析值赋值给全局对象。
CSS样式可能会被覆盖。
一句话理解react:事件\样式\选择器,只属于真实的DOM元素,Components最终被渲染成真实DOM。
在重用社区或自定义组件的时候,如果组件没有给出样式配置的钩子(Hooks),那么我们可以在浏览器调试工具中,先找出指定元素的选择器,然后去覆盖先前样式(Style)。
在Props和State发生改变的时候,组件会发生更新,至于如何被更新,可以查看“差分算法”;
组件生命周期: 挂载、卸载发生在页面加载和路由,更新发生在Props或State改变后;
受控组件: 像表单元素这样的,有状态,并将状态控制权交给React的元素称为受控组件,受控组件必须满足两个条件:① 表单元素;② 状态被React控制(显式的value属性)。所以如果你又想给出默认值又不想将表单元素变成受控组件,请使用defaultValue给出默认值;
使用JSX语法的JS文件必须导入React ---- import React from 'react';
{}类似于eval()、模板引擎、JS``模板变量,先执行(执行模板中的表达式或调用)再渲染(将表达式运行的结果渲染出来),所以要特别注意{}中需要的是函数还是函数调用()。
使用Node.js(服务端)的包在浏览器编译,会发生错误, 所以在npm install时要注意包的使用环境。 Failed to compile Module not found: Can't resolve 'XXX' in 'xxx.lib'
在这里插入图片描述
Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it. 函数作为React子函数无效。 如果从render props中返回{Component}而不是,则可能会发生这种情况。 或许你打算调用这个函数而不是返回它。
React.Children.only expected to receive a single React element child.,某个组件可以通过PropTypes作类型检查,限制属性类型
MyComponent.propTypes = {
children: PropTypes.element.isRequired
};
在redux中使用combineReducers时要注意其实现原理 —— 类似于如下代码: 一般实现:
const chatReducer = (state = defaultState, action = {}) => {
return {
chatLog: chatLog(state.chatLog, action),
statusMessage: statusMessage(state.statusMessage, action),
userName: userName(state.userName, action)
}
};
combineReducers实现
const combineReducers = reducers => {
return (state = {}, action) => {
return Object.keys(reducers).reduce(
(nextState, key) => {
nextState[key] = reducers[key](state[key], action);
return nextState;
},
{}
);
};
};
无论是针对哪个属性拆分出来的子reducer,在任意dispatch发生时,都会被执行,所以定义subReducer时要注意在内部根据action.type来判断执行路径,如果这种type的action不会影响subReducer对应的state.key,那么一定要直接返回该state.key。
React踩坑笔记 —— React的更多相关文章
- react踩坑笔记
1.create-react-app中配置webpack // 方法一:将项目的配置文件抽取到项目中,即运行: npm run eject // 方法二:使用react-app-rewired 2.c ...
- EntityFramework CodeFirst SQLServer转Oracle踩坑笔记
接着在Oracle中使用Entity Framework 6 CodeFirst这篇博文,正在将项目从SQLServer 2012转至Oracle 11g,目前为止遇到的问题在此记录下. SQL Se ...
- CAS5.3服务器搭建与客户端整合SpringBoot以及踩坑笔记
CAS5.3服务器搭建与客户端整合SpringBoot以及踩坑笔记 cas服务器的搭建 导出证书(1和2步骤是找了课程,随便写了一下存记录,不过对于自己测试不投入使用应该不影响) C:\Users\D ...
- react 入坑笔记(四) - React 事件绑定和传参
React 事件处理 建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick=&q ...
- 新版react踩坑总结
使用es6语法与原本es5语法几个有区别的地方 1.React.creatClass与React.Component var Component = React.createClass({ rende ...
- ES踩坑笔记
现在开始在业务上使用ES,记录一些踩坑经历,做点笔记. 2018-11-13 source不返回问题 使用了角色校验,客户端插入成功之后获取数据没有source,和查询参数无关. 检查mapping, ...
- 微信小程序使用pako.js的踩坑笔记
问题 今天组长跟我们讨论了个问题,说是文章存储占用有点大,消耗宽带流量费,让我看看能不能找个方法解决一下(文章存储的是html字符串).第一反应是没什么头绪,能想到的就是将相同的字符串替换成一个标识之 ...
- Vue3.x+element-plus+ts踩坑笔记
闲聊 前段时间小颖在B站找了个学习vue3+TS的视频,自己尝试着搭建了一些基础代码,在实现功能的过程中遇到了一些问题,为了防止自己遗忘,写个随笔记录一下嘻嘻 项目代码 git地址:vue3.x-ts ...
- react 入坑笔记(三) - Props
React Props props - 参数. 组件类 React.Component 有个 defaultProps 属性,以 class xxx extend React.Component 形式 ...
随机推荐
- steam 数据转换
目录 数组和集合互转 数组转集合 方法一 遍历 方法二 asList 方法三 steam 集合转数组 方法一 循环 方法二 toArray 方法三 steam 小结 string转为Character ...
- Sunday算法解决字符串匹配问题
概述 提起字符串匹配可能更多人会想到KMP算法,该算法时间复杂度为O(m+n),而且也是我们在学习数据结构过程中最早接触到的比较好的算法.但KMP算法需要在模式字符串有关联的情况下,也即模式字符串前后 ...
- CentOS如何设置IP连接网络
1.登录系统,进入:cd /etc/sysconfig/network-scripts 目录下,如下图: 找到 ifcfg-ens33(文件) 第二步:使用vi编辑器打开ifcfg-ens33文件,使 ...
- oracle之二数据字典表和动态性能视图
数据字典表和动态性能视图 Oracle提供了大量的内部表,它们记录了数据库对象的更改和修正.可以将这些内部表划分为两种主要类型:静态的数据字典表和动态的性能表.这些内部表是由oracle维护的,可以说 ...
- css常用属性之display属性
1.dispaly属性之一:块级标签转行内便签display: inline(内容有多大,就展示多大(用F12看区别)) 2.display属性之二:行内便签转块级标签:diaplay: block ...
- 说说XcodeLLDB调试的那些事儿
使用场景之一,接收他人的项目,快速理清其层次结构,可以打标识符断点,如下图 每一个VC,都加了个在viewDidLoad方法处的断点,这样运行程序时,逐步断点,便可以理清层次, 但是,需要手动不断的继 ...
- 用H5自带拖拽做出购物车效果的作业题
效果描述: 图片代表物品,图片在有宽高的div上方显示,把图片拖放到设置好的div里面,并且在div里面显示图片的信息:价格,物品名,数量.如果拖放有重复,只是在div里面让物品的数量加1,最后计算出 ...
- netty学习心得2内存池
http://frankfan915.iteye.com/blog/2199600 https://www.jianshu.com/p/13f72e0395c8:一个性能调优的文档,还有一些linux ...
- python 第二节课内容和练习
一.列表 []表示列表,用','进行分隔,list有序 能够进行索引 切片 (in append extend count index insert pop remove,reverse sort c ...
- 最全总结 | 聊聊 Python 数据处理全家桶(Sqlite篇)
1. 前言 上篇文章 聊到 Python 处理 Mysql 数据库最常见的两种方式,本篇文章继续说另外一种比较常用的数据库:Sqlite Sqlite 是一种 嵌入式数据库,数据库就是一个文件,体积很 ...