newway007的博客

原以为这俩算法是一样的。。就只看了react的，没想到居然不一样。。。这里做一些笔记react：是将旧的虚拟dom的同一层级的key值节点作为一个集合（旧的集合）新的虚拟dom的同一层级的key值节点作为一个集合（新集合）比如 旧集合为：a b c d新集合为：b c a d比较方法为：先遍历新的集合，判断有哪一些节点需要添加和删除；再...

今天做react优化的时候，想到了click的延迟事件；引入了react-fastclick模块；想要探究一下fastclick插件背后原理，由于react-fastclick中的事件都是合成事件，可能会稍微复杂一些，所以在网上找了一个原生js可用的的fastclick.js模块。插件的注释写得真的太友好了，几乎可以无障碍阅读，比jquery简单。大概思路就是，先判断它...

学完这个，react就告一段落了。react hooks解决的问题：1.函数式组件不能使用state之前只能用于一些简单而无交互的场景。2.副作用的问题。通常数据的获取、订阅或者手动修改React DOM这些行为，我们成为副作用；react提供useEffect 这个API来处理组件的副作用问题。取代了componentDidMount，componentDidU...

redux原理就是做一个全局的状态管理，然后通过上下文context传递，provide和connect就是这么做的。使用react hooks中的useContext和useReducer就可以构建一个类似的全局状态管理了。首先利用useReducer得到一个状态state和改变状态的dispatch然后用useContext传递state和dispatch给组件。组件就可以获得st...

react路由有两种：BrowserRouter和HashRouterBrowserRouter原理是H5的historyAPI地址栏没有#号通过高阶组件的属性代理方式，将match, location, history以props的形式传递给routeimport {Switch, Route, Link, BrowserRouter as Router} from 'reac...

全局的存储storeimport {observable, action} from 'mobx';class Store { @observable num; construction(){ this.num = 0 } timer= observable({ tile:1, visible: false,//用户信息的模态框...

首先是src目录结构：store目录下：action.jsexport const add=()=>({type:'add',data:1});export const down=()=>({type:'down',data:1});reducer.jsfunction reducer(state=0,action){ switch(action.ty...

//组件使用redux的方法；import React, { Component } from 'react'import { connect } from 'react-redux';class playBar extends Component { constructor(props) { super(props);//可以使用state中的数据和方法；...

高阶组件中的withRouter, 作用是将一个组件包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中.// withRouter实现原理: // 将组件包裹进 Route, 然后返回// const withRouter = () => {// return () =&...

vscode中js文件报ts的错误，针对这个问题在首选项->设置里面搜索tsconfig ->去掉勾选的关于js的选项。

import一个图片，webpack打包没有问题，但是引入该图片的index.jsx就是会报错，说找不到module就试了一下别人用ts写项目遇到的同一问题的解决方案。。。在根目录下新建images.d.tsdeclare module '*.svg'declare module '*.png'declare module '*.jpg'declare module '*.jp...

什么是单元测试顾名思义单元测试就是测试最小单元，我们的单元可能是一个函数，一个button的样式，一个文案等等都可能是一个单元。那么我们在做需求的时候没有必要将所有的单元都做测试，那可能测试代码要比需求代码多得多呢。我们在做需求之前需要提前想好我们的测试用例，并针对测试用例编写测试代码，然后写需求代码。为什么要进行单元测试单元测试是在项目稳定之后，为了防止人员流动而不知道其中逻辑...

Redux 的设计思想很简单，就两句话。（1）Web 应用是一个状态机，视图与状态是一一对应的。（2）所有的状态，保存在一个对象里面。1 StoreStore 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。Redux 提供createStore这个函数，用来生成 Store。import { createStore } from 'r...

React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。useState()：状态钩子import React, { useState } from "react";export default function Button() { const [buttonText, setButtonText] = use...

react高阶组件出现的必要性：为了复用代码。一种react复用代码的封装、抽取方式，高阶组件是一个函数，接收组件并封装；开发中我们肯定会将UI组件库，重新封装成符合要求设计的组件，供大家统一调用；以及我们在开发过程中也会存在UI组件库迁移，两个库的组件名称以及API名称存在不一致情况，这就需要我们将要组件名称和API名称进行重写了；当然最重要的一个业务场景是，我们的项目完成度很高时，已经...

报了一个错折腾了大半天：Support for the experimental syntax 'decorators-legacy' isn't currently enab试了网上各种办法，什么安装：npm install @babel/plugin-proposal-decorators再往package.json里面添加一堆代码"babel": { ...

有时候会遇到props没有变化，但是，组件依然更新的问题(return使用的是this.props.data)我将组件return的值设置为this.state.data。没有调用this.setState，但是componentDidUpdate依然运行了。这说明无论值变不变化和是否重新设置（我最开始以为是props设置了同样的值也会引起update），react组件都会进...

这几天断断续续看了一个基于react的开发教程。收获做一个总结吧。对格式的要求这个不是必要的，但是有这一点，会让你的代码看得更舒服一些，更一目了然。比如：import ErrorPage from "page/error/index.jsx";import Login from "page/login/index.jsx";import Us...

this.setState{[key]:true//key是变量名}为什么可以这么写呢？let key = 'foo';let obj = { [key]: 321, ['a' + 'bc']: 123};let obj = { ['h' + 'el' + 'lo']() { return 'hello'; }};是ES6的一种写法...

function ChildrenDemo(props) { console.log(props.children, 'children30'); console.log(React.Children.map(props.children, item => [item, [item, [item]]]), 'children31'); // console.log(React....

import React from 'react'export default class RefDemo extends React.Component { constructor() { super() this.objRef = React.createRef() // { current: null } } componentDidMount(...

babel转义。如果是小写的标签，将会转译成标签名。如果首字母大写，会转译成该函数名。。截图传不上来。function Comp(){return <a></a>}<Comp id='root' key='key'> test <span>111</span></Comp>"use ...

context上下文有新旧两种写法：新的用法：分为接受方和传值方；import React, { Component } from 'react'let store = { name: 'yangtao', from: '北京'}//创建上下文对象const XdContext = React.createContext()// 解构赋值，获取方法，Provid...

我计划的是先用react写个demo出来再撸源码。。但是感觉看源码已经变成一个迫在眉睫的事情。很多概念都需要看概念才能理解。不然就只能死记硬背了。所以现在脑海里两个小人，一个说先写个demo，一个说先看源码。。。props是什么？经检测，props在没有显式被super(props)继承，也可以使用this.props：如果使用super(props)，能通过th...

生命周期的8个方法：1 componentWillMount()执行场景 在render()方法之前 解释 1 因为componentWillMount是在render之前执行，所以在这个方法中setState不会发生重新渲染(re-render); 2 这是服务端渲染(server render)中唯一调用的钩子(hook); 3 通常情况下，推荐用constr...

先说一句，没有key值或者key值不唯一会报错。key的作用是为了在diff算法执行时更快的找到对应的节点，提高diff速度。不带key时：因为不带key时节点能够复用，省去了销毁/创建组件的开销，同时只需要修改DOM文本内容而不是移除/添加节点，这就是文档中所说的“刻意依赖默认行为以获取性能上的提升”。所以不带key可能性能更高。但是就地复用会带来一些副作用：例如复用了组件...

1.react的虚拟dom虚拟 DOM 到底是什么，说简单点，就是一个普通的 JavaScript 对象，包含了 tag、props、children 三个属性。<div id="app"> <p class="text">hello world!!!</p></div>上面dom结构转成虚拟dom：{ tag: 'd...

import React from "react";import PropTypes from 'prop-types'class Router extends React.Component{ constructor(props) { super(props); this.state = { hash: window.location.hash } } st...

react-router-dom里面封装的办法：import React from "react";import {Router,Route,BrowserRouter} from 'react-router-dom'import {createBrowserHistory} from 'history'let BrowserHistory = createBrowserHis...

src/index.jsimport React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import * as serviceWorker from './serviceWorker';import store from './store...

redux的适用场景：用户使用方式的复杂不同用户有不同的使用方式（普通用户和管理用户）多个用户之间可以协作与服务器之间大量交互，或者使用了WebSocketView要从多个来源获取数据从组件的角度：某个组件状态需要共享；某个状态需要在任何地方都可以拿到一个组件需要癌变全局状态一个组件需要改变另一个组件的状态发生上面情况时，如果不使用 Redux 或者其他...

index.jsimport React from 'react'import ReactDOM from 'react-dom'import { createStore } from 'redux'import Counter from './Counter'import counter from './reducers'//初始值和reducer改变state的方法...