react
邵天宇Soy
这个作者很懒,什么都没留下…
展开
-
React虚拟DOM浅析
在Web开发中,需要将数据的变化实时反映到UI上,这时就需要对DOM进行操作,但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因,为此,React引入了虚拟DOM(Virtual DOM)的机制。一、什么是虚拟DOM?在React中,render执行的结果得到的并不是真正的DOM节点,结果仅仅是轻量级的JavaScript对象,我们称之为virtual DOM。虚拟DOM是React的一大亮点,具有转载 2017-09-08 15:58:17 · 737 阅读 · 1 评论 -
react-hot-loader记录
1.npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-22.npm install --save-dev react-hot-loader@3.0.0-beta.6或者npm install --save-dev react-hot-lo原创 2017-09-08 16:15:01 · 1473 阅读 · 0 评论 -
react中的shouldComponentUpdate
当调用 setState 时,React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态。这将启动一个称为和解(reconciliation)的过程。和解(reconciliation)的最终目标是以最有效的方式,根据这个新的状态来更新UI。 为此,React将构建一个新的 React 元素树(您可以将其视为 UI 的对象表示)。一旦有了这个树,为了弄清 UI 如何响应...原创 2018-03-15 19:37:59 · 2320 阅读 · 0 评论 -
express使用 multer 做文件上传
Multer是Express官方推出的,用于Node.jsmultipart/form-data请求数据处理的中间件。它基于busboy构建,可以高效的处理文件上传,但并不处理multipart/form-data之外的用户请求前端upload代码:async uploadMethod(param) { let formdata = new FormData(); formdata.a...原创 2018-12-14 00:00:08 · 3257 阅读 · 0 评论 -
next.js中的window is not defined
1.问题描述使用了next+express做SSR,引入了富文本编辑器braft-editor(我也不知道自己为什么要用SSR渲染后台界面),代码如下import React from 'react'import BraftEditor from 'braft-editor'import 'braft-editor/dist/index.css'export default class...原创 2018-12-11 23:40:25 · 25203 阅读 · 4 评论 -
react中Component和PureComponent比较
import React, { PureComponent } from 'react';class App extends PureComponent {}import React, { Component } from 'react';class App extends Component {}PureCompoent是一个更具性能的Component的版本除了为你提供了一个具有...原创 2018-12-31 14:12:55 · 1682 阅读 · 0 评论 -
从零搭建一个基于React+Nextjs的SSR网站(二):在Nextjs项目中增加react+redux
具体搭建流程可以参考这篇文章,写得很好也非常详细:用Next.js快速上手React服务器渲染,我就不转载过来了。看完后你会搭建一个自己的本地的静态站点,这个时候我们就可以向这个项目上面添加React和Redux了。与往常的react+redux项目不同的是,以往的react的组件是用Provider容器包裹起来的,可以让容器组件拿到state,比如下面这样...import { Pro...原创 2019-01-07 20:36:32 · 3420 阅读 · 0 评论 -
从零搭建一个基于React+Nextjs的SSR网站(三):在Next项目中使用markdown
github很多开源markdown工具,比如react-markdown,marked等等。可以选择一个自己喜欢的,我这里用的marked。代码中使用也比较方便:import marked from 'marked';import hljs from 'highlight.js'; //代码高亮...hljs.configure({ tabReplace: ' ', cl...原创 2019-01-07 21:09:46 · 2398 阅读 · 0 评论