mmzzll2019的博客

我们平常的项目都是常规的开发流程，打包后直接放到服务器运行。如何才能像我们安装react一样，直接从npm平台下载呢？下面我来说下我的实现方案：1. 本地打包方式1.1 创建项目# 利用create-react-app插件创建react项目npx create-react-app my-package# 安装其他依赖npm i -D @babel/cli rimraf若还需要其他依赖，请自行安装。1.2 修改package配置我这里比较暴力，把所有的依赖都改成了devDependence

我们有时候会遇到这种业务场景： 进入某个页面时，我们需要验证用户是否已经登陆，是否拥有足够权限？我们可以通过监听路由的变化来实现。但是在react下，怎么实现呢？下面讨论实现过程：手动实现react-router-watcher实现手动实现使用Hook方式实现：import { useEffect, useState, useRef, useCallback, useMemo } from 'react'import { useLocation, useHistory, useRouteM

在线示例https://codesandbox.io/embed/myp00yr1xx?fontsize=14/react-tree2实现的效果点击分支节点时，展开其子节点点击任意节点都能十分容易的确定对应的节点数据能接受形如下列数组格式的原始节点数据： [ { id: 5, name: "节点0-3-5", p...

在线代码https://codesandbox.io/embed/myp00yr1xx?fontsize=14在线演示https://myp00yr1xx.codesandbox.io/react-context当某个属性需要传递很多层组件才到目标位置时，我们可以使用React.createContext。我们先来看看使用props层层传递的方式，a,b的传入路径a -》A-》B1-》C1...

在线演示https://myp00yr1xx.codesandbox.io/react-portal在线代码https://codesandbox.io/embed/myp00yr1xx?fontsize=14不知道大家想过这样一个问题没有，我们创建了一个子组件后，要把它放到指定的dom元素下面，该怎么办？ReactDom提供了这样一个api// child可以是ReactElement,...

在使用function 作为statless组件的时候，我们通常是这样的：const Foo = (props) => { console.info(props.name); return <div>props.name={props.name}</div>}export default class Bar extends React.PureComp...

查阅react的官网文档，发现两种方式： [[React.lazy](https://reactjs.org/docs/code-splitting.html#reactlazy)和 [loadable-components](https://github.com/smooth-code/loadable-components)...

参考文档https://reactjs.org/docs/reconciliation.html传统的diff算法https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf。为了用最少的操作，把一颗树结构转化成另外一颗树结构，使用了非常复杂的算法，复杂度达到了O(n^3),其中n为树的节点数。与传统的diff算法...

查阅文档https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent发现可以使用CustomEvent自定义事件。下面基于react-hook实现一个自定义事件example。export const CustomEventHookTest = () => { const evt = useMemo(() => { ...