react.js开发随手笔记（class、虚拟dom中diff算法、react生命周期、组件传值及redux的中间件、组件分类）

之前一直用vue.js开发项目，上个项目领导要求用react.js开发，不要慌，干它，先说下我开发对比vue的感觉
react灵活性大，处理复杂的业务或者说某个地方某个细节处理你想要的都可以用render函数生成
vue api丰富，实现功能也比较多，不同的场景绝大多数都有专门的api，react可能需要你自己来处理，各有所长
不过vue也能处理复杂的项目，具体情况看自己对技术的掌握程度和业务的复杂度来衡量。

一、class

react使用了es6语法class去继承react组件的所有属性和方法，然后在这个组件内开发自身的功能，这部分需要对es6的class方法有所熟悉，其实也就是原型链继承相关的知识点，推荐大家看一个大佬博客，写的很详细，
https://www.cnblogs.com/libin-1/p/5820550.html

二、react虚拟dom提升性能

当组件的state或者props值发生改变的时候，reader函授就会重新执行
当父组件的reader函数被执行时子组件的reader函数也会被重新运行一次，当然子组件可以用生命周期钩子shouldComponentUpdate()来控制当数据改变的时候再去render，但是组件每次数据改变都会重新render，其实react也是用到了
虚拟dom，vue中也是，性能高是因为虚拟dom

虚拟dom其实就是js对象，用它来描述虚拟dom、减少了真实dom的创建及对比，减少了性能消耗
虚拟dom中的diff算法（同层比对）：用来找原始虚拟dom和新的虚拟dom的比对的差异，提升性能
先生成虚拟dom(js对象)再生成真实dom，数据改变生成新的虚拟dom去对比，改变真实dom
jsx => React.creatElement => 虚拟dom（js对象） => 真实dom

虚拟dom的优点：1、性能提升 2、它使得跨端应用得以实现 React Native(原生的手机真实dom不被识别，虚拟dom都会被识别)

三、react生命周期

生命周期函数指在某一时刻组件会自动调用执行的函数（注意每个组件都有这些生命周期函数）
初始化
constructor也可以理解为一个生命周期函数，但是它不是react独有的，是es6带的一个函数，
做一些初始化工作（定义state、接收props），在组件被创建的那个时刻被自动调用。

挂载
componentWillMount: 在组件即将被挂载到页面的时刻执行（还没被挂载）（只会执行一次）
render函数：当state和props发生改变的时候render函数会被重新执行，他也是一个生命周期函数
componentDidMount: 组件被挂载到页面之后自动被渲染（只会执行一次）

更新
shouldComponentUpdate(): 组件被更新之前，他会自动被执行（返回Boolean）,默认返回true

componentWillUpdate(已废弃):组件被更新之前，他会自动被执行，但是在shouldComponentUpdate()为true后面执行
render: 重新渲生成虚拟dom去对比，改变真是的dom
componentDidUpdate:组件被更新之后，他会自动被执行，但是在shouldComponentUpdate()为true后面执行

componentWillReceiveProps(已废弃):
如果该组件没有接收props，该声明周期函数不会比执行
一个组件要从父组件接受参数
只要父组件的render函数重新被执行了，子组件的这个生命周期函数就会被执行

卸载
componentWillUnmount:当一个组件从页面上删除的时候被调用

注意： react中内置了生命周期函数，唯独没有内置render，所以这个是必写的
shouldComponentUpdate(nextProps,nextState)解决性能损耗，接受两个参数
if(nextProps. != this.props.){return true} return false

四、组件传值及redux的中间件

父传子：父a={a}，子{this.prop.a}
子传父：单项数据流，子修改父不允许，但是方法调用可以

非父子redux：redux及其中间件redux-thunk、redux-saga、react-redux

redux-thunk： 正常情况下组件中dispatch传的是一个对象交给reducer去处理，但是仅仅这种方式是不能满足我们的需求的，有时候我们需要将一些异步请求（比如公用的请求）也交给reducer去处理，还有一个好处就是这个action都放到一个地方去管理，这时候redux-thunk就出现了，解决了只能dispatch对象的action，不能传方法的问题
其实thunk就是store的dispatch封装升级，之前是对象，现在是一个函数，可以将函数传给store，但是不是直接传给store，他会先执行，执行完了传给store一个对象

redux-saga： 异步代码拆分的中间件，将所有的action都放到一起处理，有时候会出现一些异步请求很多，并且一些异步可以会出现回调地狱，项目大了，代码看起来就很乱，这时候redux-saga就出现了，将异步请求全都放大saga中去处理，并且saga中使用的是generator函数，让异步看起来更像同步，不了解的伙伴可以看下es6中的generator函数异步编程的概念。

react-redux： 他是中间件的一个封装桥梁，让store和组件链接起来，里面有辅助函数（mapState、mapDispatch）可以直接读取操作store，当不使用他时，需要去监听store的值变化（store.subscribe），实时改变页面

当然redux中也有很多细节点，比如不可以直接改变state的值，我们要深拷贝操作，或者immutable.js 让state变成不可改变的对象，有时候也需要将immutable对象与普通对象转化方法 fromJS() 、 toJS()

四、UI组件 、容器组件、无状态组件、异步组件

组件拆分：
ui组件只负责渲染，
容器组件负责逻辑，
无状态组件：当一个组件只有一个render函数的时候我们就可以用一个无状态组件来定义这个组件
就是一个函数，这个函数接受一个props，同时返回一个jsx，用props代替this.props
性能高，因为就是一个函数，普通组件是一个react类，还要执行生命周期函数，执行的多了
异步组件：react-loadable，用到再去加载，一下加载所有组件时间较长，优化用户体验

五、styled-components

styled-components对样式进行管理，组件自己的样式只对自己有效，这种方式相当于vue中的scoped，但是我觉得每个组件定义自己的大类也可以达到这种效果，所以项目中我没用，可能以后会发现他的优势，项目痛点才会用它。。。