背景在开发react项目时，很多时候我们把style写在css、less、scss里，经过像postcss这样的配置处理，但有没有这样一种需求呢，像有些样式我们直接写在xml标签上style里，然后也能进行处理，如px2rem能将px转rem，是否在style上写也能实现。思路我们在webpack，/.(js|jsx)?$/这样babel-loader之前（webpack从右往左）加一个loader把需要转变的px进行替换，不就好了，先找找有没有这样的loader，我找了下没找到，只能自己写一个了 代...
前言 本文讲述怎么实现动态加载组件，并借此阐述适配器模式。 一、普通路由例子import Center from page/center; import Data from page/data;function App(){return (<Router><Switch><Route exact path="/" render={() => (<Redirect to="/center" />)} /><Route path="/data" component={Data} /><Route path="/center" component={Center} /><Route render={() => <h1 style={{ textAlign: center, marginTop: 160px, color:rg...
最近在自学react native，学习过程中遇到了不少的坑，下面将针对登录这一功能来详细介绍一下以下遇到的两个问题。 1.在请求数据的时候，一般情况下我们会直接提交Content-type是json数据格式的请求。类似 fetch(https://mywebsite.com/endpoint/, {method: POST,headers: {Accept: application/json,Content-Type: application/json,},body: JSON.stringify({firstParam: yourValue,secondParam: yourOtherValue,}) })当我开始请求...
在react项目中总会遇到这样一个的坑这是警告数组遍历子元素要有一个唯一的key值，但是key到底是什么，在代码中到底起了什么作用？ key概述 react中的key属性，它是一个特殊的属性，它的出现不是给开发者用的（例如你为一个组件设置key之后，也仍无法获取这个组件的key值），而是给react自己用的。简单来说，react利用key来识别组件，它是一种身份标识标识，就像我们的身份证用来辨识一个人一样。每个key对应一个组件，相同的key re...
当我问自己第一百次时，我正在研究一个典型的CRUD屏幕：“我应该将状态保留在这个组件中还是将其移动到父组件？”。 如果需要对子组件的状态进行轻微控制。您可能也遇到了同样的问题。 让我们通过一个简单的例子和??三种修复方法来回顾它。前两种方法是常见的做法，第三种方法不太常规。 问题； 为了向您展示我的意思，我将使用一个简单的书籍CRUD（译者注：增加(Create)、读取查询(Retrieve)、更新(Update)和删除(Delete)）屏幕（...
前言 为了在我的编辑器中使用 Angular，我用 Angular 编写了一个重命名功能。而为了使用它，我得再次使用一次 customEvent ，而在这个微前端架构的系统中，其事件通讯机制已经相当的复杂。在这部分的代码进一步恶化之前，我得尝试有没有别的方式。于是，我想到了之前在其它组件中使用的 Web Components 技术，而 Angular 6 正好可以支持。 下面话不多说了，来一起看看详细的介绍吧 HTML 中引入 Web Components我所需要做的事情也相...
create-react-app 是facebook的官方脚手架，对于个人开发者和中小型公司快速创建项目非常推荐。react的CSS解决方案有很多，这里我技术选型时用 css modules 和 sass ，然后配合antd使用通用组件库。但是create-react-app原生并不支持 css modules 和 sass ，所以需要额外配置。 配置增加css modules和sass使用eject暴露配置create-react-app 默认是没有暴露 webpack 配置的，所以需要eject一下。注意如果项目在git仓库环境下，先提...
1.为什么要使用虚拟dom？ 网页性能优化->尽量少操作DOM 2..虚拟DOM(Virtual DOM) VS js直接操作原生DOM(innerHTML) function Raw() {var data = _buildData(),html = "";...for(var i=0; i<data.length; i++) {var render = template;render = render.replace("{{className}}", "");render = render.replace("{{label}}", data[i].label);html += render;}...container.innerHTML = html;... } 以下测试用例中虽然构造了一个包含10...
前言 在最近做的一个react项目中，遇到了一个比较典型的需要重构的场景：提取两个组件中共同的部分。最开始通过使用嵌套组件和继承的方式完成了这次重构。但是后来又用高阶组件重新写了一遍，发现更好一点。在这里记录下这两种方式以便之后参考和演进。本次重构的场景 因为场景涉及到具体的业务，所以我现在将它简化为一个简单的场景。现在有两个黑色箱子，箱子上都有一个红色按钮，A箱子充满气体，按了按钮之后箱子里面气体变红，...
一、介绍PureComponentReact 15.3在2016.06.29发布了，这个版本最值得关注的是支持了 React.PureComponent ，它取代了之前的 pure-render-mixin 。在本文中，我们将讨论 PureComponent 的重要性和使用场景。 React.PureComponent最重要的一个用处就是优化React应用，这很容易快速地实现。使用 React.PureComponent 对性能的提升是非常可观的，因为它减少了应用中的渲染次数。PureComponent改变了生命周期方法 shouldComponentupdat...
react是R系技术栈中最基础同时也是最核心的一环，2年不到获取了62.5k star(截止到目前)，足可见其给力程度。下面对一些react日常开发中的注意事项进行罗列。 React的组件生命周期 react主要思想是构建可复用组件来构建用户界面。在react里面一切皆组件。每个组件里面都是有自己的生命周期，这个生命周期规定了组件的状态和方法，分别在哪个阶段执行。下面附上一张React的生命周期图：组件第一阶段：初始化、渲染以及装载完成； 组件...
前言React Native 可以开发 ios 和 android 的 app，在开发过程中，势必会遇上屏幕适配（ios 好几种尺寸的屏幕以及 android 各种尺寸的屏幕）的问题，下面介绍一种几行代码搞定 RN 适配的方法！ 屏幕适配的前置知识RN 中的尺寸单位为 dp，而设计稿中的单位为 px原理虽然单位不同，但是元素所占屏幕宽度的比例是相同的 利用元素所占屏幕比例不变的特性，来将 px 转为 dp（这样实现屏幕适配的话，在不同尺寸的屏幕下，元素会等比放大...
在使用React过程中，中可以使用this.state来访问需要的某些状态，但是需要更新或者修改state时，一般而言，我们都会使用setState()函数，从而达到更新state的目的，setState()函数执行会触发页面重新渲染UI。但是！！！setState是异步的！！！ 1. 语法： setState(updater[, callback]) //updater是要改变的state对象，callback是state导致的页面重新渲染的回调，等价于componentDidUpdate 一般而言，在设置页面某些state的时候，需...
使用eslint和editorconfig规范代码 为什么要用这些： 代码规范有利于团队协作纯手工规范耗时耗力而且不能保证准确性能配合编辑器自动提醒错误，提高开发效率eslint 随着ECMAScript版本一直更新的Js lint工具，插件丰富，并且能够套用规范，规则非常丰富，能够满足大部分团队的需求。eslint 配合 git 为了最大程度控制每个人的规范，我们可以在git commit代码的时候，使用git hook调用eslint进行代码规范验证，不规范的代码无法提交...
React是目前前端社区最流行的UI库之一，它的基于组件化的开发方式极大地提升了前端开发体验，React通过拆分一个大的应用至一个个小的组件，来使得我们的代码更加的可被重用，以及获得更好的可维护性，等等还有其他很多的优点...通过React, 我们通常会开发一个单页应用（SPA），单页应用在浏览器端会比传统的网页有更好的用户体验，浏览器一般会拿到一个body为空的html，然后加载script指定的js, 当所有js加载完毕后，开始执行js, 最...