Fragment & 空标签

可以看到div层级太多，但又不能把div去掉，可使用Fragment代替

App.js使用空标签也可达到效果

两者区别在于Fragment在遍历使用时可以写key,而空标签啥也写不了。

RenderProps(相当于Vue插槽)

children props(如果C组件需要B组件内的数据==> 做不到)

render props

context API

回顾一下用法

这⾥有个坑，当provider的⽗组件进⾏重渲染时，可能会在consumers件中触发意外的渲染。举个栗子，当每⼀次Provider 重渲染时，以下的代码会重渲染所有下⾯的consumers 组件，因为value属性总是被赋值为新的对象：

为了防⽌对象这种情况，将value状态提升到⽗节点的state⾥：

Context被归类为⾼级部分，属于React的⾼级API，react-redux的，就是通过Context提供⼀个全局态的store，路由组件react-router通过Context管理路由状态等等。

错误边界

错误边界(Error boundary)：用来捕获后代组件错误，渲染出备用页面

只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误

getDerivedStateFromError配合componentDidCatch

运行后发现只有一瞬间显示网络不稳定,稍后再试那是因为目前是开发环境，打包后使用serve build或者上生产环境就没问题了。

代理搞一搞

1.起个koa服务压压惊

2.页面点击按钮请求接口

3.结果跨域再正常不过了

4.设置代理第一种方式

修改package.json

修改请求接口为3000接口
结果

	优点：配置简单，不需加前缀
    	缺点：不能配置多个代理

5.设置代理第二种方式

src下创建setupProxy.js 名字不可改react会去读

请求加上api1 结果

	优点：可配置多个代理，灵活控制请求是否走代理
        缺点：配置繁琐，需要加前缀

其他解决方案就不说了，之前的跨域说的应该是挺明白的了。

react 多环境打包配置

cnpm i cross-env

修改package.json

修改请求接口前的环境变量判断

这时运行npm run qa 就可以打包测试包 npm run build 就可以打包正式包。

修改config/paths.js 修改下打包后的打包文件名

这时运行npm run qa 就可以打包出文件名为qa测试包 npm run build 就可以打包出文件名为build正式包。

react 打包路径配置

一般来说打完包的index加载资源都是./xxx，我们可以通过配置homepage修稿加载资源的路径。

打包预览

npm run build

npm i serve -g (全局安装启动服务器)

serve build

部署

自动化部署

服务器安装Jenkins 安装JAVA、Node、npm、Git/SVN环境,因为需要从Git中拉取代码到服务器，需要自动对代码进行构建，需要执行npm install/npm build...
Jenkins创建任务，一般两个任务一个构建测试的项目，一个构建生产的项目。(构建执行shell npm install npm run build...)
发布测试服务器(构建后操作Send build aritifacs over SSH),再次构建直接将打包的文件丢到服务器。
发布正式服务器(构建后操作Send build aritifacs over SSH),再次构建直接将打包的文件丢到服务器。

React Fiber

React 15 的问题

在页面元素很多，且需要频繁刷新的场景下，React 15 会出现掉帧卡顿的现象。
其根本原因，是大量的同步计算任务阻塞了浏览器的 UI 渲染，GUI渲染和JS代码执行是互斥的，如果 JS 运算持续占用主线程，页面就没法得到及时的更新。
当我们调用setState更新页面的时候，React会遍历应用的所有节点，计算出差异，然后再更新 UI。整个过程是一气呵成，不能被打断的。如果页面元素很多，整个过程占用的时机就可能超过 1/60 = 16.66毫秒，就容易出现掉帧的现象。

解决方案

解决主线程长时间被 JS 运算占用这一问题的基本思路，是将运算分片。也就是说在完成一部分任务之后，将控制权交回给浏览器，让浏览器有时间进行页面的渲染。等浏览器忙完之后，再继续之前未完成的任务。
实现方式是使用了浏览器的requestIdleCallback这一API，window.requestIdleCallback()会在浏览器空闲时期依次调用函数，这就可以让开发者在主事件循环中执行后台或低优先级的任务。

React 16.8.0

调度器 (Scheduler) 来进行任务分配。任务的优先级有六种： synchronous：同步执行

task：在next tick之前执行

animation：下一帧之前执行

high：在不久的将来立即执行

low：稍微延迟执行也没关系

offscreen：下一次render时或scroll时才执行

Fiber在执行过程中，会分为 2 个阶段。阶段一，生成 Fiber 树，得出需要更新的节点信息。这一步是一个渐进的过程，可以被打断。

阶段二，将需要更新的节点一次过批量更新，这个过程不能被打断。

阶段一可被打断的特性，让优先级更高的任务先执行，从框架层面大大降低了页面掉帧的概率。

参考文档 segmentfault.com/a/119000001…

React-SSR

单页面应用的两个问题

请求的静态资源只有Index.html，接着会去请求css,js等资源,会导致首屏加载过慢。
单页面无关键字给搜索引擎收录，不利于SEO。

如何解决

采用服务端渲染(SSR)

什么是SSR

页面你在服务端已经生成了完成的HTML页面结构，不需要浏览器解析。对应的就是CSR(客户端渲染)，开发的SPA页面通常就是客户端渲染。
将浏览器之前的操作交给node去完成(请求css,js,ajax生成html...)。

Next.js

npm install -g create-next-app
create-next-app next-demo

ImmutableJS

Immutable对象的特点是只要修改了对象，就会返回一个新的对象，旧的对象不会发生改变，新对象尽可能利用之前的数据结构而不会对内存造成浪费。

React其它扩展