react
文章平均质量分 55
时光之里
Before Dawn
展开
-
React 或者 vue 为什么在列表组件中使用 key
先回答:key的作用主要是为了 虚拟DOM 在执行 diff算法 时更快的找到对应的节点,提高diff速度,高效的更新 Virtual DOM;key值采用index和id的区别?const list 1 = [ { id: 1, name; 'test1' }, { id: 2, name; 'test2' }, { id: 3, name; 'test3' }]// 向中间插入test4之后const list2 = [ { id: 1, name: "test1" },原创 2021-03-12 17:26:11 · 256 阅读 · 0 评论 -
react 源码
react 源码React.js 文件const React = { Children: { map, forEach, count, toArray, only }, createRef, Component, PureComponent, createContext, forwardRef, lazy, m...原创 2019-12-27 16:07:35 · 358 阅读 · 0 评论 -
解决 尝试更新已卸载(或无法挂载)的组件`Index`
Attempted to update component Index that has already been unmounted (or failed to mount).尝试更新已卸载(或无法挂载)的组件Index。错误示例一:错误代码:❌@inject('CrumbStore')constructor(props) { super(props); this.Crumb...原创 2018-11-02 11:23:29 · 8085 阅读 · 0 评论 -
react+mobx实现侧边栏菜单
菜单配置文件container > sideMenu > configMenu.js/** * @description 左侧菜单配置 * @param(leafMenuModels) 子节点菜单 * @param(active) boolean 当前菜单是否被选中 * @param(id) string 菜单ID,唯一,不能重复 * @param(name) strin...原创 2018-11-02 15:47:12 · 1426 阅读 · 4 评论 -
使用Froala Editor富文本插件 react版本
使用Froala Editor富文本插件 react版本原地址: https://www.froala.com/wysiwyg-editor/react版本地址: https://www.froala.com/wysiwyg-editor/docs/framework-plugins/react第一步:引入配置展示官网实例配置完webpack之后,报错:index.js:1 Uncaug...原创 2018-11-02 16:08:48 · 1905 阅读 · 0 评论 -
20190422 关于react你需要知道
ReactDOM可以有效的防止XSS(跨站脚本)攻击ReactDOM在渲染之前会过滤所有传入的值,将所有的内容都转化成字符串,而不是一段可执行的代码,这样就可以确保应用不会被注入攻击。场景:a.com可以发文章,我登录后在a.com中发布了一篇包含恶意代码<script>window.open(“www.b.com?param=”+document.cookie)</scr...原创 2019-03-20 16:59:16 · 204 阅读 · 0 评论 -
20190425 react-router
认识react-router什么是React 路由,为什么需要React 路由:构建在react基础上的强大的路由库作用:使 URL 与 网页上显示的数据 或者 页面 保持同步特点:每个路由都指向一个特定的页面。优点:react-router利用虚拟 DOM 和 diff算法对页面进行’按需更新‘,只更新变化的部分,从而减少DOM性能消耗。与常规路由的不同React 路由:只...原创 2019-04-25 16:20:16 · 189 阅读 · 0 评论 -
react-router browserHistory 刷新页面 404 问题解决
react-router 原理react-router 是建立在 history 之上的,history 监听浏览器地址栏的变化,解析 URL 然后转换成 location 对象,然后 router 使用它匹配到路由,正确的渲染对应的页面。browserHistory 原理browserHistory 使用的是浏览器的 history api,创建一个真实的 URL。browserHist...原创 2019-05-08 18:38:04 · 3801 阅读 · 0 评论 -
react 16新特性介绍
目录React v16.0 (2017 年 9 月)render 支持返回数组和字符串错误边界 componentDidCatchFiberReact v16.2 (2017 年 11 月)FragmentReact v16.3 (2018 年 3 月)Context创建 Ref 使用回调函数 或者 createRef组件的生命周期React v16.4 ...原创 2019-05-17 19:17:36 · 1261 阅读 · 0 评论 -
react-router v4 路由跳转 路由传参 路由监听
react-router v4 路由跳转react-router v4 路由传参使用 withRouterwithRouter高阶组件,提供了history让你使用~import React from "react";import {withRouter} from "react-router-dom";class MyComponent extends React.Compon...原创 2018-11-01 15:22:42 · 2473 阅读 · 0 评论 -
react系列之flux、redux、mobx、dva
简介react 是一个基于 mvvm 模式的组件化开发的 web 框架。做 react 项目需要掌握什么react 功能单一,用于 UI 渲染redux 用来管理数据react-router 用来管理路由webpack 用来配置工程ES6 让代码更加优雅简洁具体使用了些什么dva框架:dva 是一个前端应用框架,集成了 redux,redux-saga...原创 2018-05-07 18:58:41 · 2978 阅读 · 0 评论 -
mobx内置流flow异步请求
什么是flow它与async / await的工作方式相同。 只需使用函数*而不是async和yield而不是await。flow的优点在于他在预发上非常接近async / await,并且异步部分不需要手动操作包装,从而产生非常干净的代码。flow只能用作函数而不能用作装饰器。应用import axios from "axios";export function ge...原创 2018-08-06 22:04:32 · 3941 阅读 · 0 评论 -
九宫格拼图
九宫格拼图import React, { Component } from 'react';import './index.less';class ViewData extends Component { render() { // 重点是这个数组 const data = [ [0,0,0,0,0,0,0,0,0],...原创 2018-08-06 22:18:45 · 1141 阅读 · 0 评论 -
DVA知识集合
react与dva 原文地址:https://github.com/dvajs/dva-knowledgemap1.变量声明const DELAY = 1000let count = 0count = count + 12. 模板字符串const user = 'world'console.log(`hello ${user}`)// 多行const content = ` hel原创 2017-07-19 13:17:48 · 17508 阅读 · 3 评论