![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 79
Qssn丶
学无止境,码无尽头
展开
-
React服务端渲染(SSR)入门及项目搭建
服务端渲染是什么?我们什么情况下需要使用它?想要了解这些,需要简单聊聊前端渲染的发展史。服务端渲染并不是什么新兴的技术,动态网页技术(、等)其实就是服务端渲染,网页都是由后端获取数据并将其放入到网页模板中,然后返回完整的HTML到浏览器渲染。这样做的渲染方式有明显的缺点,每次数据改变都需要重新再去获取数据并组装新的HTML、网页和后端逻辑耦合等。直到的出现。的出现,使得前后端得以分离。在该模式下,后端依然会返回一个HTML页面,后续通过AJAX来动态获取数据,利用DOM操作动态更新网页内容。......原创 2022-06-15 14:35:21 · 3314 阅读 · 3 评论 -
虚拟DOM和DOM Diff
代码已经关联到github: 链接地址 觉得不错可以顺手点个star,这里会持续分享自己的开发经验(:虚拟DOM什么是虚拟DOM一种编程的概念,与真实DOM节点对应,一个能表示真实DOM的对象。React下的虚拟DOM在React属于ReactElement对象,格式如下:const reactElement = { key:null, props:{ className:"", onClick: () => {}, children:[] }, ty原创 2022-01-29 10:21:42 · 1014 阅读 · 0 评论 -
React源码调试环境搭建
做为一个React使用者,肯定也想学习React源码,为了一探究竟,调试当然是必不可少的,因为纸上得来终觉浅,跟着代码跑一遍才是王道,所以就有了这篇文章。具体的步骤就是分为三步:克隆 React 项目用 Create React App 创建一个新的项目react-debug ,并且npm run eject 暴露配置。用克隆的React 项目替换掉react-debug 中的React包,修改配置和处理报错。这里并不会介绍具体的步骤,因为不同版本可能要改动的地方不尽相同,直接提供一个开箱即用原创 2022-01-16 19:48:00 · 735 阅读 · 0 评论 -
React hooks组件中,定义的方法取不到新的state值的坑
项目中使用postal订阅方法时,使用react hooks useEffect去监听方法时,发现取到的state一直是旧的值,然后重写了例子。假设有个需求,父组件修改颜色,父组件会把该颜色传到子组件,子组件每次点击会打印当前自己state里面的颜色。这里子组件有两个监听事件,一个是原生dom的监听方式,一个是react提供的监听,再测试的时候发现二者表现不同,所以写了两个。直接预览:h...原创 2020-04-01 11:56:08 · 7511 阅读 · 0 评论 -
React 阻止事件冒泡失效、stopPropagation和stopImmediatePropagation分析,解决stopPropagation没有阻止冒泡问题
做开发中,React 和 JS 原生事件监听`addEventListener`混用了,因此发现了一个现象:React的阻止冒泡并没有阻止原生JS监听的事件触发。下面代码的输出是(代码链接:https://codepen.io/Lik_Lit/pen/OJLROMW)“root click”“inner dom click”“document c......原创 2019-08-20 14:45:05 · 8884 阅读 · 7 评论 -
React16版本Hook钩子函数的简单理解
自己也在学习中,百度到的文章都是翻译API的,记录一下自己的理解吧,本身是小白,有错误请指出。目前在学习当中,发现React的偏向于将逻辑从组件中抽出,使组件仅仅用于接收数据渲染,而逻辑全放入Hook中操作。useState用于返回组件的初始化state并且返回更新方法,它只关心你传入的初始值,可以包装一下更便于抽出逻辑,组件只用于渲染。useState返回的第一个参数就是你initialS...原创 2019-03-03 20:04:36 · 1514 阅读 · 0 评论 -
从零开始,使用Webpack4配置属于自己的React项目及源码(实现count小例子)
前言:使用react16.8+webpack4配置的项目,项目已经完成es6编译配置,安装命令用红体字标出1.项目目录结构说明及源码下载源码地址:https://download.csdn.net/download/dknightl/11074578下载完成后解压后还要解压node_module.zip压缩包,解压完node_module压缩包,命令行进入,输入npm run dev即...原创 2018-11-10 18:21:50 · 476 阅读 · 0 评论 -
webpack3构建生产和开发环境分离
官网链接:https://webpack.js.org/guides/production/ webpack开发环境和生产环境的构建目标差异很大。在开发环境中,需要具有强大的、具有实时加载或者热模块替换的source map和localhost server。而生产环境中,关注的是更小的bundle,更轻量的source map,以及更加优化的资源,已改善加载文件的时间。要遵循逻辑分离,我们通常建...原创 2018-02-08 15:12:50 · 1174 阅读 · 0 评论 -
reactjs用剪头函数绑定this,告别constructor绑定this
在写react组件的时候,你是不是也被constructor方法里的绑定this烦恼过(如下),如果不是,那就没必要看下去了... constructor(props){ super(props); this.showAddQuestion=this.showAddQuestion.bind(this); this.hideAddQuestion=this.hideAddQuesti...原创 2018-02-08 16:33:28 · 1075 阅读 · 0 评论 -
React-Router做路由,打包出来的静态文件丢到Tomcat里路由不生效,刷新页面404两个错误
有些开发er可能会想把做好的react项目,打包出来的静态文件丢到tomcat上测试,然后发现自己的路由怎么不生效了?? 页面不进行加载了。 第二个就是但是当我们刷新一下浏览器,或者打开一个不存在的页面的时候路由不加载(都是路径惹的祸) 首先,看一下自己的本地路径是不是这个样子的: http://localhost:8888/home然而丢到tomcat的webap原创 2018-02-07 17:32:52 · 5297 阅读 · 0 评论 -
react论坛问答demo(react+redux)
react的一个小例子,实现了添加问题以及描述、对问题进行赞或踩、能对问题进行答复,排序等功能。用webpack搭的环境,react功能用到了redux、中间件、动画、路由(按需加载),其他用到了less和immutable。首次使用请用npm install 可以下载安装package.json中的模块也可以用来当作开发react的环境!当作自己的记录了。路由按需加载请看我的这篇文章:原创 2018-01-26 09:50:05 · 1828 阅读 · 0 评论 -
React-router4 使用bundle-loader实现按需加载(code-splitting)
一、参考链接: 1.官网:https://reacttraining.com/react-router/web/guides/code-splitting/code-splitting-server-rendering2.某文章:http://blog.csdn.net/mjzhang1993/article/details/79094594二、源码链接:http://downlo原创 2018-02-05 17:16:50 · 5310 阅读 · 2 评论 -
使用webpack构建本地服务器并添加React本地调试功能
参考文档(一个很全面的webpack入门):https://www.jianshu.com/p/42e11515c10f前言:想不想让你的浏览器监听你的代码的修改,并自动刷新显示修改后的结果,其实Webpack提供一个可选的本地开发服务器,这个本地服务器基于node.js构建,可以实现你想要的这些功能,不过它是一个单独的组件,在webpack中进行配置之前需要单独安装它作为项目依赖转载 2018-01-10 15:57:59 · 1865 阅读 · 0 评论 -
React学习日记之安装模块
安装node 安装react react-domnpm install --save react react-dom安装webpacknpm install webpack -g安装bablenpm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react原创 2018-01-04 15:36:44 · 680 阅读 · 0 评论 -
使 sublime 可以自动补全 jsx 的标签(前提是安装Emmet )
使 sublime 可以自动补全 jsx 的标签(前提是安装Emmet )方法:菜单->Preferences->Key Bindings - User 添加下面的代码:[{ "keys": [ "tab" ], "args": { "action": "expand_abbreviation" }, "command": "run_emmet_action", "c转载 2017-12-18 16:03:12 · 1176 阅读 · 0 评论