笔记17React-知识点总结

React-知识点总结

1、redux中间件的原理

  Redux流程：view在redux中触发actionCreator来派发一个action，action通过stor
e的dispatch方法来派发给store；store接收到后把之前state结合action发给Reducer
Reducer返回一个新的state，view通过getState方法来获取新状态。
  Redux中间件指的是Action和Store之间的一层中间件；它让我们可以对dispatch进行
一个封装，原始的dispatch会接收一个对象，传递对象给Store；而经过我们中间件处理
后的dispatch，可以接收一个对象或函数，再经由中间件处理传递对象给Store。
  所以Redux中间件是Store对于dispatch的一个升级。例如我们的redux-thunk，redux-
saga。redux-thunk把异步操作放在action里；而redux-saga单独把异步逻辑拆分开出来
放在一个异步文件里面管理。

2、componentWillReceiveProps调用时期

子组件第二次接收到props的时候（props改变的时候)

3、React的性能优化

  例如使用PrueComponent：
    class Test extends React.PureComponent{
      constructor(props){ super(props) }
      render (){ < div> test < /div> }
    }  
  PrueComponent 会自带shouldComponentUpdate的前比较，例如前后渲染相同组件
  PrueComponent能自行判断来减少重新渲染，提升渲染性能。

4、虚拟Dom是什么，为什么虚拟Dom能提升性能

  虚拟Dom是一个真实Dom的Js对象。
虚拟Dom没有真实Dom上的复杂事件绑定、属性、方法等。而将Dom对象转换为Js对象比对
Js对象的比对会比真实Dom的比对快许多，且虚拟Dom还具备Diff算法，key值。
key值相同，React判断后可以直接复用相同Key值的组件，不再重新渲染来提升性能。
Diff算法核心是，每一层节点比对会判断是否还继续比对，
若某一层比对不相等则直接放弃。Diff算法让此算法复杂度从n^2降低至n

5、webpack中，是借助什么完成的Jsx代码的转换

   不同于vue在webpack中借助vue-Loader来转换；React则是借助了babel。
底层React借助了babel的preset-react，它是一个插件的合集来完成jsx代码转换

6、setState调用后，发生什么

   setState({ name : 'aaa'},()=>{ console.log(this.state.name) })
setState调用后发生调和过程，有两个参数，第二个参数是一个回调函数；
第一个参数用于改变状态，第二个参数的回调函数可以用于获取setState改变后的状态
注意：setState是异步的，如果直接获取Dom可能会获取setState之前的状态，所以这里
将获取后续状态的操作放在setState的第二个回调。 

7、refs

    refs用于操作Dom，例如：渲染一个图片，展示后获取图片的宽高（放大镜)
注意：在Dom、window上使用addEventListener绑定事件，记得将函数提出来写；
方便后续componentWillUnmount的removeEventListener来清除事件的绑定。        

8、高阶组件

    高阶组件接收函数，返回函数。在设计模式里有一个宗旨是：组合优于继承，
所以在React里提倡组件之间的组合，即组件拼接。高阶组件就是一个函数，对于
组件进行包装，返回一个包装后的函数。我们可以把可以复用的东西写在高阶组件里。    
    高阶组件的问题：嵌套太多组件后的地狱嵌套，代码会显得层次较多，而React对
它的一个解决方式就是React-Hooks，它提倡声明式并且可以减少嵌套地狱的现象。    

9、受控组件和非受控组价

    受控组件：受到数据的控制，即一个input框受value的控制，即state状态的控制
    非受控组件：不受数据控制，例如一input我们使用refs控制其Dom，可自行修改

10、函数组件的性能优化

①函数组件：function test(){ return < div>111< /div> }
②函数组件的特点：没有this、没有生命周期函数、没有state状态、只能接收props
 （可借助Hook来基于函数组件以状态管理、消除异步操作副作用等功能）
③函数组件相对类组件的性能优势：组件简单，没有复杂的构造过程，没有state状态
④函数组件相对类组件的性能劣势：不存在shouldComponentUpdate周期来阻止重复渲染
⑤函数组件的性能提升点：基于函数组件可以终止额外重复渲染的功能，即React.memo()
React.memo可以对函数组件进行包装，让函数组件在具备shouldComponentUpdate特性
同时它还不需要构造组件的生命周期函数，这样的函数组件具备超过类组件的性能优势。

11、browserHistory和hashHistory

browserHistory:需要后端服务器（Nginx代理服务器）配合进行路由配置
而hashHistory只需要前端来决定路由配置

12、异步组件

React中可以使用Reloadable库来进行路由懒加载。
它用到了import('./home/header').then(...)来返回一个Promise进行按需加载
例如我们的项目打包后过大，我们可以先加载首页，然后结合情况进行按需加载

13、React进一步防范xss

    我们的Jsx可以在渲染任何内容的时候，将输入转义为String类型。
所以我们需要注意的是慎用危险的Api例如dangerouslySetInnerHtml

14、getDeriverdStateFromProps和getSnapshotBeforeUpdate

    ①在我们的父组件传递给子组件的props变化时，帮助我们更新state，它可以用于替
代即将被废弃的componentWillReceiveProps。它可以额外的更新state
    ②用于替代之前的componenWillUpdate生命周期，此函数可以在我们组件更新之前
可以获取到更新之前的Dom结构，来传递给componentDidUpdate