Provider123456789class App extends React.Component { render() { return ( <ThemeContext.Provider value="dark"> <Toolbar /> </ThemeContext.Provider> ); }} Provider 只接收一个 props 为 value 的值 两种用法1，static contextType123456class ThemedButton ext ...

antd form react-final-form redux-form customize Field yes yes yes asyncValidating yes yes yes form create HOC Context Context, HOC react 16 yes yes yes Form state management “state” “state” redux Field state management “state” “state” redux has basic component yes false false A ...

已经纯在的问题12345678910111213141516171819module: { rules: [ { test: /(logo|outlier|coaching)\.png$/, loader: 'file-loader?name=./[path][name].[ext]' }, { test: /\.(png|jpg)$/, loader: 'file-loader?name=./[path][name].[ext]&publicPath=.', ...

理论上我们用一种动画就好了，为什么还要在两中动画之间切换呢？ 我们先来看一个场景。微信上的从屏幕左边缘向右滑的返回操作。在手指滑动的时候当前页面是跟随手指移动的，要返回的页面出现在划开的地方。跟随手指移动的动画不用说大家应该知道是要通过 JS 来实现的。然后手指放开，如果手指移动超过屏幕一半的宽度，那么就是返回操作，这时候会有个动画效果，当前页面会继续向右移动，直至屏幕边缘消失。将要显示的一个页面也会有一个动画效果，从左侧移出，直至填充满全屏幕。当手指离开屏幕之后的动画效果应该是通过 CSS 来实现。 这里就会存在从 JS 动画，到 CSS 动画的一个切换过程。事实上 JS 动画是通过连续的改 ...

这篇文章的由来是因为我在自己写的组件中，在 componentWillReceiveProps() 里面调用了 setState() 方法，导致 why-did-you-update 提示 state did not change. Avoidable re-render! 官方也是推荐在 componentWillReceiveProps() 里面使用 setState()，照理说 state 都是变了， why-did-you-update 应该不会提示才对。为了一探究竟，决定去扒 React 的源代码，所以以下分析都是基于 React@15.6.2 来的。 先理一下思路，setStat ...

虽然说使用 React 已经可以得到很好的性能了，但是还是会有一些使用方法的不对会导致 React 应用的性能下降。官方文档也有一篇文章专门介绍如何优化性能，「Avoid Reconciliation」这一节我觉得值得一看。 下面我要说的也是围绕「Avoid Reconciliation」这一节的内容来进行展开。首先「Reconciliation」是什么意思呢，我理解的是需要调用组件的 render() 方法进行重新渲染，用生成新的虚拟 DOM 与老的虚拟 DOM 对比，以此来决定是否需要更新 DOM。React 在重新渲染之前会去判断 shouldComponentUpdate() 函数返回 ...

前端异常处理的思路是在执行的入口处 try catch，以此来减少由致命错误导致的程序崩溃，错误上报等。 这样的话我们需要知道 js 程序的执行入口。一是正常的执行流程，二是异步回调函数。在 js 中正常的执行流程比较少也比较好处理。但是回调函数随处可见。所以以下着重写一下我是怎么处理在回调函数中的异常。 回调函数又分为事件的回调函数和网络请求的回调函数。 其中网络请求的回调函数比较好处理，每个请求都调用同一个方法。比如： 123456789101112131415161718192021222324252627function getJson(url, successCallback, fa ...

不知道大家发现没有，一旦一个页面可以滚动加载，并且进入详细页面，再点击浏览器的返回按钮，返回的页面往往让我们非常抓狂。如果前一个 list 页面停留在滚动加载出来的内容上面。当浏览器返回的时候会再次加载之前加载过的内容。并且滚动到之前离开的地方。这样不仅会造成等待，还会造成网络开销和页面跳动，而且往往不是精确的滚动之前离开的地方。尤其是这一点不能滚动到之前离开的地方，这种混乱的感觉很让人抓狂。 但是 HTML5 的 History API 就给我们提供了很好的解决方案。 History API 是怎么工作的History API在全局对象 window 下面有个 history 属性，它是 H ...

首先说明 一下需求，有若干个 jsp 页面，想使用同一个 jsp 做 parent 然后， 每个 view 只放入 parent 的某个节点下面，比如 content。 很简单的一个需求但是至少花了我三天的时间。由于是使用的 google，所以就想把通过不断的自我提问以及根据网上人们的答案一步步缩小问题范围，修正精炼需求的过程记录下来。顺便看一下 google 是如何一步步引导自己走向新的不熟悉的领域。再看一下自己是如何一步步步入歧途，以及如何迷途知返的。 知道需求我们就开始去寻找解决方案吧。因为我用的是 spring mvc，所以先看看官方有没有解决方案吧。 1， google “sprin ...

from disk cachefrom memory cache 强校验器与弱校验器。ETags，作为缓存的一种强校验器。Last-Modified 响应头可以作为一种弱校验器。 如果没有包含校验器，并且缓存没有过期。就会有200 (from disk cache / from memory cache)情况，这样浏览可以更快的获取到资源，没有网络开销。 如果有校验器，就始终有网路开销。在缓存没有失效的情况下服务器会返回 304. 使用情况在改动不频繁的情况下可以不使用校验器。像博客系统的 js，css 资源。图片 在改动较频繁的情况下，根据情况使用强弱校验器。或者在 url 后面加入版本 ...