diwang_718的博客

1、先安装git,链接（https://lvan-zhang.blog.youkuaiyun.com/article/details/115665707），就可以下载代码了，一定要记住密码，打开.ssh 找到密钥和公钥，（不用每次输入密码：https://blog.youkuaiyun.com/weixin_43972437/article/details/114578337）sudo 命令。6、安装vscode（https://www.runoob.com/w3cnote/vscode-tutorial.html?

使用命令yarn start 之后，控制台报如下错误解决方法：百度搜索之后，看到有位大佬说是使用的是全局的 webpack，找不到某些目录，将全局的指向自己当前的项目即可。命令如下： npm link webpack命令运行完之后，再yarn start ，项目就跑起来了，非常不错，亲测有效，记录一下，防止自己忘记了，哈哈哈~大佬链接：链接...

文章目录1、class 组件的问题？2、 useEffect 模拟组件的生命周期？1、class 组件的问题？大型组件很难拆分和重构，难测试相同业务逻辑，分散到各个方法中，逻辑比较混乱服用逻辑变得复杂，如Minxins 、HOC、Render Prop所以react 提倡函数式编程，因为函数更灵活、更易拆分、更容易测试，但是函数太简单，但是函数组件加上hooks就能实现class 里的功能。2、 useEffect 模拟组件的生命周期？模拟componentDidMount 和compo

1、React 和Vue 的对比？

首先说一下我的应用场景：1：有一个列表页（A组件），两个表单弹窗（B组件和C组件）2：第一个弹窗（B组件）填完之后才能跳转到 第二个弹窗（C组件）3: 所有的值在C组件提交，调接口4：接口成功需关闭第二个弹窗（在B组件中关闭），且把列表（A组件）更新（刷新）这里就涉及到了子组件向父级组件传值的问题：接口成功之后需要关闭第二个弹窗，那么这里就需要C组件向B组件传弹窗需要关闭的信息（子向父传值 ，使用props解决）A组件中的列表刷新，就需要C组件向A组件传递后端返回的数据，来进行逻辑判断 （子

1、需求： 实现点击展开图标获取后台数据，将其渲染到表格中，没有分页；效果图如下：具体实现这里有两个问题我做起来比较费劲，花了大半个下午的时间才找到解决问题的方法，一个就是点击展开图标的方法是哪个（expandable属性下的onExpand()），另一个就是找到点击展开图标调后台数据之后，如何让表格刷新(actionRef.current?.reload();)。先放代码，在仔细讲一下里面的属性：1：结构 <ProTable<DeptListItem> ac

react-transition-group是react官方推荐的一个动画过度库npm install react-transition-group --save 或yarn add react-transition-group 如果项目用ts编写，还要打如下命令npm install @types/react-transition-group --save 或yarn add @types/react-transition-group...

1、react-fontawesome ：一款非常好用的字图标库官网地址：地址github地址：https://github.com/FortAwesome/react-fontawesome安装npm: npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/react-fontawesome

例如我有一个组件，组件的类型自定义为BaseProps，但是我想这个组件也拥有a标签的属性和方法，这样子自定义的组件就可以拥有元素原生的属性跟方法了，例如onclick事件。TS中有&这个将两个类型合并为一个，然后react中有React.AnchorHTMLAttributes 这个方法来获取a标签所有的属性和方法。正确写法如下：type AnchorProps = BaseProps & React.AnchorHTMLAttributes<HTMLElement>那

1、什么是React HookReact 16.8带来了全新的特性，即将代替class组件的写法，使用函数式组件代替class组件

1、什么是redux的中间件顾名思义中间件就是谁和谁之间，那么redux中间件中的中间指的是谁呢，其实指的就是action和store，那么action和store之间的桥梁是不是dispatch，所以redux的中间件就是对dispatch的一个封装，之前dispatch接收action的是一个对象，但是使用中间件之后还可以是一个函数，如果你使用了中间件，dispatch接收的是一个对象，它就会直接派发给store，但是如果接收到一个函数的话，dispatch就会先将函数处理完，处理好之后再派发给sto

react-redux是redux 的作者封装了一个 react 专用的库，它能够使你的react组件从redux store中读取数据，并且向store分发action更新数据。react-redux和redux在项目中是配合使用的使用步骤：安装 react-redux1: npm install react-redux --save或2：yarn add react-redux在main.js中引入 react-redux 代码如下import React from 'react

1：发送异步请求是在componentDidMount这个生命周期里执行的，用到的是axios请求接口,创建有一个action，将获取到的接口数据存进去，发送dispatch方法通知store修改里面的数据代码： componentDidMount(){ axios.get('/todolist').then((res)=>{ const data = res.data const action = getInitListAction(data) st

1：UI组件和容器组件容器组件：专门写逻辑的组件，里面没有UI结构，俗称聪明组件UI组件：专门写结构的组件，里面没有逻辑，逻辑都是从容器组件传过来的，俗称傻瓜组件2:无状态组件无状态组件：就是一个函数组件，接收props，没有state，只渲染dom结构，当一个普通组件只有一个render函数的时候，就可以写成一个无状态组件。优点：性能比较高，因为他只是一个函数，普通组件是一个类，里面有好多个生命周期函数，执行的东西要比函数执行的东西多，所以他性能比较高例如下面代码就可以写成一

redux是一个状态管理工具，一般在多交互，多数据源的时候使用redux编写程序的时候方便很多，代码结构也更加清晰。以下是广为流传的redux工作流程图以上的流程我个人理解是：组件需要做某件事，将这件事告诉action，通过store.dispatch(action)传给store，store知道这件事之后，就将当前的数据和传过来的action一并传给reducers，reducers接收到这两个参数，通过action知道要对state做什么事情，处理好之后，将最新的state转给store,然后组

生命周期函数指在某一刻组件会自动调用执行的函数。一：初始化阶段1、constructor:数据初始化，可以说是生命周期函数，也可以不是，因为constructor函数在组件一创建的时候会被自动调用，但是这个方法又是ES6语法中带有的函数，所以一般不归在生命周期函数里面。二：挂载阶段1、componentWillMount:在组件即将被挂载到页面的时刻调用2、render：根据组件的props和state（无两者的重传递和重赋值，论值是否有变化，都可以引起组件重新render） ，return 一个

1、state、props、render函数之间的关系当组件的state或props的值发生改变的时候，render函数就会重新执行；当父组件的render函数被重新运行时，它的子组件的render函数都将被重新运行2、虚拟DOM虚拟DOM本质上就是一个js对象，用它来描述一个真实dom，当state数据发生变化的时候，会生成一个新的虚拟DOM,然后旧的虚拟DOM跟新的虚拟DOM进行对比，找到变化的部分，最后直接替换变化的部分即可：流程：3、diff算法（1）同层对比，如果第一层就不一样，下

1：父组件的值传给子组件例如：下面是一个todolist的功能，能很好的说明父组件传给子组件，子组件如何调用，效果图如下：代码如下：父组件：import React,{Component,Fragment} from 'react'import ToDoItem from './ToDoItem'// Fragment是占位符class ToDoList extends Component{ constructor(props){ super(props) this.st

1：自定义的标签名，要以大写字母开头，例如：//这里的App ，就是自己定义的jsx标签名，得用首字母大写 ReactDOM.render( <App />, document.getElementById('root') );2：在JSX中写注释，代码如下：单行注释： render(){ { // 这是单行注释 } return ( <div>这是单行注释</div> ) }多行注释： ren

找到这个文件 ：.umirc.js然后写上： // 修改icon links: [ // href的图片你可以放在public里面，直接./图片名.png 就可以了，也可以是cdn链接 { rel: 'icon', href: '图片地址' }, ], // 修改title title:'链接图标' ...

背景：使用react 框架，umi脚手架需求：项目开发完之后，被告知需要引入一堆静态的html文件，并且有些地方需要跳转到静态html文件方法：1：放入public文件夹中，如果你目录结构没有public，就在根目录下创建一个public文件夹，然后将静态文件复制进去2：在需要跳转的地方用，a标签来实现 ，href就直接写./文件名 ，列如 ，接可以了呢目录结构：贴代码： <a href="./test.html">点击跳转到静态页面</a>...

1、什么是虚拟DOM本质：用JS对象的形式，来模拟页面上DOM嵌套的关系；（虚拟DOM是以JS对象的形式存在的）目的：就是为了实现页面元素的高效更新。 <!--旧DOM--> <div id="mydiv" title="说实话" data-index="0"> 彬哥好帅 <p>哈哈哈</p> </div> <!--新DOM--> <div id="mydiv" title="说实话123" dat

React v16废弃的三个生命周期函数componentWillMount : 组件初始化时调用，整个生命周期只调用一次，此时可以修改state。componentWillReceiveProps（nextProps）：当props发生变化的时候调用componentWillUpdate :组件数据更新前调用，此时可以更改state。React v16后为什么会废弃这三个生命周期...