React Fiber这个大改变Facebook已经折腾两年多了，刚刚结束不久的React Conf 2017会议上，Facebook终于确认，React Fiber会搭上React下一个大版本v16的顺风车发布。

在 React Fiber 架构面世一年多后，最近 React 又发布了最新版 16.8.0，又一激动人心的特性：React Hooks 正式上线，让我升级 React 的意愿越来越强烈了。在升级之前，不妨回到原点，了解下人才济济的 React 团队为什么要大费周章，重写 React 架构，而 Fiber 又是个什么概念。

React的Suspense功能，简单说就是让组件渲染遇到需要异步操作的时候，可以无缝地“悬停”（suspense）一下，等到这个异步操作有结果的时候，再无缝地继续下去。

通常情况下，store中会有很多属性，其中有些属性更新会很频繁，每一个属性都需要写一个action函数去更新，当这种需要变更的属性越多时，会导致store中代码量异常的庞大，可读性也会降低。就如下面代码一样：

在实际项目中，我们常常会遇到这样的一些场景：比如现在需要做一个下载报表的功能，而且这个功能在很多页面都有，下载的也是同类型的报表，如果在每个页面都去写重复功能的代码显得特别冗余，可以将其封装成一个组件多处调用呢？只不过这个组件跟我们常见的一些基础组件有些区别，区别在于这个组件里头包含了业务逻辑，...

最近一直在捣鼓如何搭建React组件库，至于为什么会产生这个想法，主要是因为组件库对于前端生态来说究极重要，每一个着眼于长远发展、看重开发效率的的互联网公司基本上都会量身定制自己的组件库，它的好处不用多说。对于前端工程师而言，去理解以及掌握它，可以让我们在今后的工作中以及应聘过程中多出一项特殊技能，并...

HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。 不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。下面列举本文所用的API：

很多网页都会给文案附上一些图片补充描述，例如在说到地址时，会在旁边附上一张地图，并且在地图上标注该地址。如果附上的图片很小，很难看清楚地址的具体信息，有些产品经理会给图片设计一个可以平移、放大缩小的功能。本文将一一实现上述功能。

在使用create-react-app xxx --typescript生成一个react typescript项目时，在src目录下会生成一个react-app-env.d.ts类型声明文件

在平常项目开发中，发现前端同学在进行数据管理时存在有如下问题：进行到开发后期发现有些store体积异常庞大，动辄上千行代码，影响代码的可读性、维护性；很多store之间存在通信的场景，而之前组织的方式不便于store之间的通信；多人协作开发时难免会同时更改同一个store，不可避免的造成代码冲突；鉴于上述问题，在本...

MobX 通常会对你期望的东西做出反应。 这意味着在90％的场景下，mobx “都可以工作”。 然而，在某些时候，你会遇到一个情况，它可能不会像你所期望的那样工作。 在这个时候理解 MobX 如何确定对什么有反应就显得尤为重要。

假设现在有一个storeA，里面存放了一个属性a，在组件A挂载完成时调接口获取数据并赋给属性a。现在有另外一个组件B也需要用到属性a，组件B先再次生成一份storeA并通过Provide注入，然后在里头获取属性a，发现获取不到。

fondDOMNode当参数是DOM时得到的也是DOM，这个没有什么作用，使用ref就可以了。当参数时组件实例时获取的是组件render返回的DOM

众所周知，React 通过声明式的渲染机制把复杂的 DOM 操作抽象成为简单的 state 与 props 操作，一时圈粉无数，一夜间将前端工程师从面条式的 DOM 操作中拯救出来。尽管我们一再强调在 React 开发中尽量避免 DOM 操作，但在一些场景中仍然无法避免。当然 React 并没有把路堵死，它提供了 ref 用于访问在 render 方法中创...

express结合http-proxy-middleware配置生成一个反向代理服务器，代理到与请求在同一域名上http://localhost:3000，http://localhost:3000/mock/1241/xxx就是在请求代理服务器，然后代理服务器转发到http://10.118.71.83:3000/mock/1241/xxx。

开发过程中使用Mobx极大的方便了我们，但是在使用过程中还是会或多或少地遇到一些问题导致绑定失败，下面我们来一起探讨下Mobx的绑定过程，以方便我们来更好的使用它。

我们先来假设一种场景：当进入页面时需要去请求获取初始数据，初始数据中有一个字段A，当A====true时需要弹出一个弹窗。先封装一个弹窗组件，组件接口两个参数visible、close，visible控制是否显示弹窗，close用来关闭弹窗 {代码...} 然后在页面中调用 {代码...} 这里使用mobx@1.15.4，mobx-react@6.2.2，mobx6版本写法...

Loadable是一个高阶组件（hoc），在执行Loadable时会执行createLoadableComponent函数，在createLoadableComponent函数中会执行loader函数得到一个promise对象，这个promise对象包含的是导入的组件，最后会返回一个LoadableComponent组件，该组件的render方法会渲染导入的组件，继而完成组件加载。

1、props.match.params {代码...} 这里需要指定路由参数的类型，不然Param类型默认是{} {代码...} 2、useParamsreact-router-dom@5.x提供的hooks函数useParams，useParams直接返回路由参数对象 {代码...} 同样，useParams使用时需要指定Params类型 {代码...} 3、props.location.search {代码...} 当页面不是用过路由传参...

最近我用create-react-app搭建项目，安装了mobx@6.x和mobx-react@6.x，写一个使用store例子时发现依赖store的组件没有重新渲染。

create-react-app搭建react项目后，是不支持修饰器语法的。react-scripts库已经提供了打包cli命令以及常规的构建配置，如果需要使用一些使用时特性，比如修饰器等，需要另外注入

react 16.8.0推出hooks后所有无状态组件都可以使用函数组件的形式编写，非常简洁！那么，如何某个业务场景需要在函数组件中使用的mobx，又该如何应用呢？下本为你一一揭晓。mobx在类组件常见写法如下： {代码...} 使用的是修饰器方式向组件注入store，我们也可以不使用修饰器方式，改用函数式写法： {代码...} 这两种方...

1、React.memo()是什么？React 16.6.0版本钟主要更新了两个新的功能，帮助提高渲染性能：React.memo()React.lazy(): 使用 React Suspense 进行代码拆分和懒加载本文只介绍React.memo()React.memo()和PureComponent很相似，都是用来控制组件何时渲染的。我们都知道当组件props和state发生改变时，当前组件以及其子孙组件...

eslint是检查JavaScript的，而tslint是检查typescript的，当然你也可以在eslint配置中增加对typescript的支持，用来检查typescript。prettier是用来检查代码风格的，项目中常屏蔽掉tslint中有关代码规范的规则，这部分交由prettier校验，tslint仅仅校验代码功能性错误。

redux-thunk redux-promise 参考：[链接][链接][链接]

react+typescript项目中，为了方便文件引入，我们常常配置webpack.resolve.alias来简化路径，组件的引入就可以使用别名。当我们执行构建时会报如下错误：

redux源码解析 参考：[链接]

react-router-config主要用来帮助我们进行集中式路由的配置，在不使用react-router-config之前，我们的路由使用react-router-dom库来进行配置，类似如下代码：

react-router-dom源码分析 参考：[链接]

mobx-react中Provider和inject通过context将store注入并使得任何层级的子组件可以访问到store。本文将分为两部分讲解，先说说如何使用，然后分析源码，理解底层原理。