一.React常用知识
1.react生命周期的运用
2.react-router/react-router-dom的运用
- 路由组建 router/route/link/navlink/redirect/withRouter/switch
=>react-router-dom
route下的属性path /exact /render /component
redirect下的属性from to /to
- 跳转路由
-传参
-browserRouter和hashRouter，MemoryRouter 和 StaticRouter的区别
1.前者利用H5的 history 接口，前台路由就是后台收到的路由，你点到其他页面一刷新，得，根本没这个文件，服务器也很无辜，到底让我渲染个啥？后台也可以简单的解决这个问题：甭管你请求的啥地址，我先把入口文件扔给你。node处理方式如下（需要express）：
app.get('*',(request,response)=>{
response.sendFile(path.resolve(__dirname,'../index.html'))
})
而hashRouter则刷新不会出现这个问题且通过#进行连接
2.MemoryRouter 和 StaticRouter 分别是非浏览器环境和服务器端渲染用的
react-router中switch的作用
有<Switch>标签，则其中的<Route>在路径相同的情况下，只匹配第一个，这个可以避免重复匹配
3.react父子组建的传值
-子组建接收父组建属性或方法 this.props
-父组建接收子组建的属性 通过执行父组建的属性传参，然后通过执行父组建的方法得到回调参数
-父组建执行子组建的方法 通过传属性name作为执行条件再配合
component willReceiveProps(nextProps){
if(nextProps.name!==this.props.name){
//执行子组建大方法...
}
}
还可以通过ref={(node)=>this.node=node}在父组建中得到子组建的实列然后将实例保存在this.node上，然后通过this.node.childfunc()执行其子组建的方法
4.非父子组建传值
- redux =>react-redux
action.dispatch=>store=>reducer
action处理异步请求和dispatch命令 store接收然后去reducer进行加工返回到store然后去页面渲染store的数据 ,其中store利用createStore将reducer存入store，createStore的第二个参数可以是中间件，applymiddleware(redux-thunk)主要用于异步请求axio可以返回一个方法而不再是单一的对象
-mobx简化版redux
需要在入口文件配置index.js
import { Provider } from 'mobx-react'
import store from './mobxStore'
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
, document.getElementById('app')
)
src下创建mobxStore文件夹新建index.js，导入action是为了新建方法，并修改值，observable为了监听方法值的变化，导出的时候默认new store(),页面执行mobx中的方法需要在class前面注入，此时执行store重的方法this.props.store.changetodoIds()从而修改了todoIds的值
5.组建模块化，提炼公用组建以及公用的方法
封装公共组建，封装异步请求方法（fetch /apicaller)
md5加密/日期时间格式的转化/cookie的封装/全局公共请求参数/签名
6.跨域代理的配置
webpack devserver配置代理
devServer:{
contentBase:'./dist',
compress:true,
open:true,//自动开启浏览器
port:9000，
hot:true,//热更新
proxy:{
'/api': {
target:'http://localhost:3000',
pathRewrite: {'^/api':' '}
}
}
7.react性能优化
1----- sholudComponentUpdate：主要是用来手动阻止组件渲染，一般在这个函数中做组件的性能优化。
和这种方法实现同样效果的还可以React.PureComponent
2----- react中map循环key的作用 ： key是React中用于追踪哪些列表中元素被修改、删除或者被添加的辅助标识。在diff算法中，key用来判断该元素节点是被移动过来的还是新创建的元素，减少不必要的元素重复渲染。
3----环境设置为生产模式，压缩代码
4-----路由懒加载，异步加载模块，减少不必要的渲染
5---this的绑定
第一种是在构造函数中绑定this，第二种是在render()函数里面绑定this，第三种就是使用箭头函数，都能实现上述方法；
但是哪一种方法的性能最好，是我们要考虑的问题。应该大家都知道答案：第一种的性能最好。
因为第一种，构造函数每一次渲染的时候只会执行一遍；
而第二种方法，在每次render()的时候都会重新执行一遍函数；
第三种方法的话，每一次render()的时候，都会生成一个新的箭头函数，即使两个箭头函数的内容是一样的。
第三种方法我们可以举一个例子，因为react判断是否需要进行render是浅层比较，简单来说就是通过===来判断的，如果state或者prop的类型是字符串或者数字，只要值相同，那么浅层比较就会认为其相同；
但是如果前者的类型是复杂的对象的时候，我们知道对象是引用类型，浅层比较只会认为这两个prop是不是同一个引用，如果不是，哪怕这两个对象中的内容完全一样，也会被认为是两个不同的prop。
8.react运行原理
采用虚拟dom 和diff算法结合
react是通过创建与更新虚拟元素来管理整个Virtual DOM的。
9.react对比vue运行原理
react 与vue都是函数式编程，即声明式编程，先构建规则，然后去应用规则，而传统的则是命令时编程，下命令
10.针对低版本的浏览器并不支持所谓的vue/react框架的原因
解决方案：查询浏览器版本，针对低版本的浏览器弹出提示版本过低
源地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function
https://blog.csdn.net/sinat_17775997/article/details/90417127
11. 虚拟dom
在react中，React把真实DOM树转为JavaScript对象树，也就是所谓的虚拟DOM。
在每次更新后，会重新计算Virtual DOM，并和上一次的Virtual DOM进行对比，对发生的部分进行批量更新,生成真实dom去渲染页面
虚拟dom实现了根据事件所需找到对应节点去变更，减少重新渲染所有节点的次数，减少dom操作次数，提高页面渲染效率
vdom核心api h('<标签名>',{...属性名},[...子元素])
patch(container,vnode)初始化节点初次渲染
patch(vnode,newVnode)需要变更的节点，原来的节点与新节点对比，重新渲染。
二.项目打包环境的配置
-1.webpack原理构建机制
a.解析webpack配置参数，合并从shell传入和webpack.config.js文件里配置的参数，生产最后的配置结果。
b.注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的反应。
c.从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去。
d在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换。
e.递归完后得到每个文件的最终结果，根据entry配置生成代码块chunk。
f.输出所有chunk到文件系统。
需要注意的是，在构建生命周期中有一系列插件在合适的时机做了合适的事情，比如UglifyJsPlugin会在loader转换递归完后对结果再使用UglifyJs压缩覆盖之前的结果
-2 .webpack 常见的配置
a.入口 =>entry
b.出口=>output /filename/path
c.loader
是用来加载处理各种形式的资源,本质上是一个函数, 接受文件作为参数,返回转化后的结构,loader 用于对模块的 源代码进行转换即 文件转换器，例如把es6转换为es5，scss转换为css。
d.plugins
用于扩展webpack的功能，在webpack构建生命周期的节点上加入扩展hook为webpack加入功能。
e.chunk多个文件组成的一个代码块，例如把一个可执行模块和它所有依赖的模块组合和一个chunk这体现了webpack的打包机制。
-3 .webpack 性能优化
---优化构建速度
Webpack在启动后会根据Entry配置的入口出发，递归地解析所依赖的文件。这个过程分为搜索文件和把匹配的文件进行分析、转化的两个过程，因此可以从这两个角度来进行优化配置。
https://juejin.im/post/5b652b036fb9a04fa01d616b
三.echarts在react中的运用
四.期货/股票行情的运用 websocket /mqtt
---websocket 与普通http请求的区别
---
五.ES6语法的运用
1.es6解构
2.箭头函数
箭头函数和普通函数的区别
网友评论