赵乘风_i

在需要跳转页，触发跳转window.open('/xxx/yyy/zzz#detail')在接收跳转页并到固定锚点，进行判断并使用 scrollTo 方法进行页面滚动，调用scrollTo 的对象是document.querySelector('.layout-content')，而不是window，原因是react项目切换路由，没有回到顶部useEffect( () => { if (window.location.hash === '#detail') {...

在网上找了很久，也都是利用window.scrollTo 方法去解决的，但我尝试后，发现没有生效。问了其他大佬之后，才发现问题出在 scrollTo 方法的调用上class ScrollToTop extends Component { componentWillReceiveProps(nextProps) { // 当路由切换时 if (this.props.location !== nextProps.location) {

我又来更新了~简单聊一下我前段时间社招的经历啦~到新公司入职已经两个多月了，从准备面试到确定offer再到入职，就1个半月时间，似乎很快，但这也让我感触颇深。首先是为什么要离开之前的公司呢？面试的时候，每一家hr都会问，谈话的时候，领导也会问。我一直的回答都是两个点，首先是我毕业两年多了，想要寻求一个更大的发展空间，还有一个点就是工资太低了。但一般没有说第二个点，只有再追问时，我会直接说了，因为也没有必要隐瞒，跳槽嘛，大家都心知肚明，大部分原因都是钱没给到位。其实我离开还有一个点就是之前一起毕业进公

最近开发的一个功能，和之前写过的很像，但毕竟我也快两年经验了，当然不能再使用原来实现的方法，于是，又搞起来。功能： 需要对多个Input组成的list可以新增和删除在之前的文章 react 涉及的增加，删除list ，我说不可以使用 index 来做删除，就使用了 给每个 list 添加 selfId 的方式来实现删除。然而事实是可以使用 index 来进行删除操作的。当年我才疏学浅，没有get到高级玩法，使用selfId这样的实现，无疑就是对数据过度操作了，所以学习了新的使用方法，实现如下：技术

期望在新代码中使用hooks函数 + hooks = 有‘生命周期’的组件与class的区别：Hook 提供了强大而富有表现力的方式来在组件间复用功能，自定义hookconst [originData, setStateData] = useState(0);const newData = originData * 2;setStateData(newData);//useEf...

1、全局安装tsnpm i -g typescript2、创建tsconfig.jsontsc --init修改tsconfig.json，开启jsx和allowJs配置，3、安装开发环境依赖npm install --save-dev typescript @types/react @types/react-dom ts-loader4、修改webpack.config.js....

问题： 渲染过程分为两个阶段1、调度阶段：根据更新数据生成新的Virtual DOM，通过Diff算法，找出需要更新的元素，生成新的更新队列，2、渲染过程：遍历更新队列，将变更一次性更新到DOM上。而1过程是不可控的，也就是说React在执行更新的时候是同步的，浏览器主线程被React占着用来调度，这段时间如果用户进行操作，那就不会得到反馈。需要同步更新的任务完成后，主线程才被释放。Rea...

问题：react antd Tab页切换，第一次都加载数据，之后切换都不加载。根据请求接口返回的值是否有内容来判断是否发送请求。lodash.isEmpty(arr) &&  this.getData()但是路由跳转后，应该组件是销毁了，但在使用mobx的数据，有值之后就把值存在相应的对象中，导致再进去另一个item对应的详情页的时候，数据没有改变，相应的对象保持着...

React组件在生命周期里面大概有两种情况，一种是初次渲染，一种是状态更新导致再次渲染。咱们从组件生命周期的每一步可进行的操作的角度来了解一下。初次渲染构造函数，指定This，初始状态，绑定函数（constructor） constructor(props){ //指定This super(props) ...

React 源码分析写在前面React 开发一年多，最近仔细研究了 React 源码，在这里总结一下原理。React 源码比较复杂不适合初学者去学习。所以本文通过实现一套简易版的 React，使得理解原理更加容易（本文基于 React v15）。包括：React 的几种组件以及首次渲染实现 React 更新机制的实现以及 React diff 算法React 的代码还是非常复杂的，...

最近在项目中的一个需求是， 小图点击可以弹框放大，然后能查看原图，顺时针一直旋转，每次90度。实现方法：使用react开发，所以直接选用antd 的组件， Upload 。结合CSS3的旋转属性；查看原图可以直接使用window.open()打开新的标签页。实习代码： constructor(props){ super(props); ...

最近还是一直在进行代码优化前几天进行了一次codeReview，leader给我指出了很多问题1、一个产品的实现是协同的，不要完全按照原型图和后台给的数据去实现，你需要加入自己的思考，参与进去，目的是把产品做得更好，而不是只为了实现需求2、代码hack太多，考虑不足3、命名不规范，有的地方使用了arr，s1，s2等变量，需要改正4、Table  list中的render尽量少写...

上一篇文章是关于从零构建一个webpack项目，基本已经启动成功了，这篇文章将会讲一下在项目中使用目前最流行的React框架1、引入babel相关现代前端基本都是以es6为规范进行开发，所以我们项目中也就需要引入es6。es6是需要使用babel进行转换的，浏览器才能识别npm install --save-dev babel-core babel-loader babel-pres...

上一篇是关于引入react,redux,antd的，项目已经可以正常运行了，但是拿到的都是定义的死数据。这篇文章讲一下配置代理，调mock数据。简便起见，我使用的是Easy Mock，定义好mock数据，在项目中引入使用。先说一下Easy Mock的使用方法，创建一个项目，创建好之后，进入刚才创建的这个项目创建接口并在左侧添加数据创建好之后，就是要在项目...

使用webpack主要是想因为其优秀的压缩打包功能，之前的配置中只是设置了关于dev环境的启动和运行。但是打包的时候文件并没有变小，也就是没有使用到压缩的配置。这次会配置相关的压缩以及区分生产环境和开发环境开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot...

在网上看到过很多教程，都是从零开始构建一个项目，每次看着都浩浩荡荡的开始跟着博客一步一步走，但是总是很难成功。自己一直想要从零构建一个项目来实践一下，了解一下偏底层的配置。最近比较有时间，就又一次开始了。不过这次没有盲目的在网上找教程，而是直接打开官方文档webpack，开始实践。 所以给大家的建议也是 学习就直接看官方文档就行，遇到问题再搜索，整那些有的没的，其实...

基本的配置大概已经结束了，现在我们可以使用antd的组件来进行业务开发了。改动的地方是这些新建一个全局菜单文件 layout/index.jsimport React from 'react';import { Layout, Menu, Icon, Breadcrumb } from 'antd';import { withRouter } from 'react-router-do...

最近构建两个项目，都有遇到这个问题，记录一下Cannot find module '@babel/core' babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@...

Q: 人员列表页面切换保留筛选项ans:/** * 表单组件在挂载时，将组件的 fields 值赋给对应的交互组件 */componentDidMount() { const { fields, pageIndex } = View; this.props.form.setFieldsValue(fields); this.getUser(pageIndex);...

有一个需求是下拉菜单中有操作，但有些操作是有前提条件的，比如 批量启用 就需要在选择了数据之后。所以设置disabled来控制它操作还是不可操作。但是会出现一个问题，在<Menu.Item></Menu.Item>中的 不是 string就会导致 disabled不能生效也就是以下情况<Menu.Item key="1" disabled={dis}>...

export 导出某个对象export default fn 默认输出export fn 正常输出import {xx} from 取整个对象的某个属性import xx from 取整个对象有一个对应关系export default fn =&gt;import {xx} from ...取决于使用方法，如果是需要按需加载，可以用第一种方法，或者第二种...

问题：使用react modal的时候，弹框显示不同的值，因为显示的值是传到子组件中的，需要实现的是，点击不同的编辑，弹框中拿到的是对应的值。使用的是在FormItem中设置initialValue，但是只有第一次能拿到值，之后就都拿不到。原因：modal 组件在关闭之后，并没有销毁组件，导致FormItem中设置initialValue时，只有在初始化加载的时候赋值，之后点击...

选择某个子菜单时，需要将父菜单也发送过去，后端要判断权限，如果只发子菜单，就做不到匹配，导致父菜单都不会显示在菜单栏。需要解决的问题是antd tree中，父子节点是受控的，默认如果只选择一个子节点，就只把这一个子节点放进数组，如果选择了父节点下的所有子节点，就会将父节点也放进去。现在需要的是，只选择一个子节点的时候，也将父节点放进去。但是antd tree组件没有提供这个属性。于是自己按照后...

问题：创建账号时，输入账号后不搜索直接保存，提示查询后，再点搜索就不能搜索这个账号了原因：点击保存之后，对表单进行了验证，导致之后请求的数据无法在更新到input框中，也就是说即使在state中有值，也不会更新initialValue值，就导致搜索后的值不能正确填入input中，表单也就提交不了。解决办法：不使用initialValue设置动态更新的值，而是使用 this....

典型的Web应用程序通常由共享数据的多个UI组件组成。通常，多个组件的任务是负责展示同一对象的不同属性。这个对象表示可随时更改的状态。在多个组件之间保持状态的一致性会是一场噩梦，特别是如果有多个通道用于更新同一个对象。举个?，一个带有购物车的网站。在顶部，我们用一个UI组件显示购物车中的商品数量。我们还可以用另一个UI组件，显示购物车中商品的总价。如果用户点击添加到购物车按钮，则这两个组...

毕业刚到公司，老大让我做一个系统，开发周期20天。遇到了很多问题，首先总结一下在开发之外需要注意的问题，关于开发的问题会在另一篇博客中。1.拿到原型图，首先需要进行分析，将页面布局和逻辑都搞清楚，不要急着开发，有什么问题及时向产品提出。2.和后台定义接口数据，包括格式，避免在联调时出现问题。3.在开发的时候可以看一看有什么模块可以进行复用，写成组件4.如果修改到公共文件，及...

 webpack是最近比较火的构建工具，搭配上同样比较火的ReacJS与ES6(ES2015)一定是现在很多潮流 programmer 的追求。 废话不多，下面就就看下如何从0搭起我们的构建工具。 安装全局安装webpack，如果安装后还是提示没有webpack commond，可以尝试通过超级管理员身份安装。$ npm install webpack -g$ sudo n...

1.使用Link 首先需要引入Link 模块。import { Link } from 'react-router'2.通过 Link to设置路由跳转地址，以及需要传递的参数对象，注意，此处to 中所携带的路由和参数也是一个对象。&lt;Link to={{ pathname: `detail/${id}`, state: 'hello', ...

写在前面：根据网上学习教程整理归纳，感谢大佬们如果我们需要使用 JSX，则 &lt;script&gt; 标签的 type 属性需要设置为 text/babel在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代注释需要写在花括号中1、在标签内部的注释需要花括号2、在标签外的的注释不能使用花括号JSX 允许在模板中插入数组，数组会自动展开所有...

写在前面：根据网上教程学习整理，感谢各位大佬们是什么？为什么要用？怎么用？数据流Redux 的适用场景：多交互、多数据源。用户的使用方式复杂不同身份的用户有不同的使用方式（比如普通用户和管理员）多个用户之间可以协作与服务器大量交互，或者使用了WebSocketView要从多个来源获取数据从组件角度看，如果你的应用有以下场景，可以考虑使用 Redux。某个组件的状态，需要共享某个状态需要在任何地方都...

写在前面：参考网上学习教程，进行知识点归纳React 是一个用于构建用户界面的JAVASCRIPT库 ，不是MVC/MVVM结构React 特点 1.声明式设计 −React采用声明范式，可以轻松描述应用。 直接声明所有dom元素和属性2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。3.灵活 −React可以与已知的库或框架很好地配合。4.JSX − JSX 是 Jav...

原文地址：https://www.onmpw.com/tm/xwzj/web_150.html使用webpack编译打包react是非常便捷的。这也是人们常用的一种方式。但是在使用过程中，一定要注意一个细节，那就是webpack和babel-loader的安装位置。react安装当然，使用react必须先安装react和react-dom，其安装方式很简单（前提是我们必须安装有npm）。# npm...

对于用户界面而言，展示只占整体设计因素的一半，另一半则是相应用户输入，即通过JavaScript处理用户产生的事件。React通过将事件处理器 绑定到组建上处理事件，事件触发的同时更新组建的内部状态，内部状态更新会触发组件的重绘。因此，如果视图层想要渲染出事件出发后的结果，它所要做的就是渲染函数中读取组件的内部状态。一、绑定事件处理器React处理事件本身和原生的JavaScript事...

在组件的整个生命周期中，随着该组件的props或者state发生改变，它的DOM表现也将有相应的改变，一个组件就是一个状态机，对于特定的输入，它总会返回一致的输出。React为每个组件提供了生命周期钩子函数去响应不同的时刻——创建时、存在期及销毁时。 生命周期方法React的组件拥有简洁的生命周期API，它仅仅提供你所需要的方法，而不会去最求全面。实例化：一个实例出吃被穿件...

link路由跳转的遇到的问题：          1: 使用query,data等进行传值，可以在另一个页面拿到值，但是to的跳转不起作用                       解决： 1.去掉link,加点击函数，使用this.props.history.push('./xxxxx')，参数有 to,query,data等。                           ...

问题：1、confirm 使用在使用antd的confirm确认时，需要在点击事件发生后关闭弹框。但是confirm提供的关闭只有 确定 按钮。那么就需要自定义关闭弹窗。点击  密码修改页  之后 会打开新的tab页，所以需要弹框在点击之后也关闭。解决：confirm提供了一个弹窗的销毁方法const info = Modal.info({})info.destroy(...

antd from验证input框只能输入数字问题：Input框中如果只能需要输入Id，也就是数字型字符串，需要进行验证。解决办法对其进行实时正则验证， /^[1-9]\d*$/代码实现：&amp;amp;lt;Form.Item label='ID' &amp;amp;gt; { getFieldDecorator('id', { rul...

前言阅读对象：使用过redux，对redux实现原理不是很理解的开发者。在我实习入职培训的时候，我的前端组长就跟我说过，redux的核心源码很简洁，建议我有空去看一下，提升对redux系列的理解。入职一个多月了，已经参与了公司的不少项目，redux也使用了一段时间，对于redux的理解却一直没有深入，还停留在“知道怎么用，但是不知道其核心原理”的阶段。所以就在github上拉了...

阅读目录(Content)React的组件生命周期 JSX 语法 父组件传向子组件 子组件传向父(爷)组件 getDefaultProps &amp;&amp; getInitialState 获取真实的DOM节点 子组件传向父组件的另一种思路 react是R系技术栈中最基础同时也是最核心的一环，2年不到获取了62.5k star(截止到目前)，足可见其给力程度。下面对一些re...

问题：componentWillReceiveProps，在父子组件传值中，如果子组件不能在constructor中通过props拿到值，就使用这个挂载函数。如果需要在子组件中改变父组件传来的值，就直接修改，但是修改后如果更新了props的值，componentWillReceiveProps函数就会再调用一次啊，导致你要修改的值重新初始化，就达不到修改的效果。解决：在父组件中修改这个...