React Tips-2

1. 关于JSX注释方式：

第一种：{/*这是一行注释*/}
第二种：{
            //这是一行注释
        }

2. 在React的JSX中去使用样式对应的class作类名时为了避免混淆，需要使用className来代替class作为一个标签或者组件的类属性。

3. 在React中如果要在<label></label>标签上加上for属性时为了避免混淆，需要使用htmlFor来代替，例如<label htmlFor="insertArea">输入内容</label> （在label标签上加for属性是为了对id等于insertArea的输入框有更大的点击区域来进行光标聚焦）

4. React具有单项数据流的特性，子组件只能读取父组件传来的数据不能修改。

5. PropTypes进行传值的类型校验，DefaultTypes进行参数的默认值定义
官方文档详解：
https://react.docschina.org/docs/typechecking-with-proptypes.html

6. render函数的执行：
    • 当组件的state或者props发生改变时render函数就会被重新执行
    • 当父组件的render函数被运行时，它的子组件的render函数都将被重新运行

7. React中的虚拟DOM：本质上是一个JS对象，提供性能的原因是JS中比较JS对象不怎么消耗性能，而直接比较DOM很耗性能。
转换的过程：JSX --> createElement  -->  虚拟DOM（JS对象）-->  真实的DOM

下图是React的虚拟DOM原理：

8. 虚拟DOM中的Diff算法
    • setState在底层中可以把间隔时间较短的多次setState合成一次setState，来减少虚拟DOM比对的次数。
    • Diff算法比对两个虚拟DOM差异的时候，会逐层的比对，如果一层不满足的比对的要求时候，那么下面的就不会再比对了，下面的直接废弃掉，用新的替换旧的，这样会提升性能。
    • React中进行列表比对的时候使用key值用来提升性能，尽量不要使用index作为key值（因为index作为key值是不稳定的）。
    
9. 生命周期函数：指在某一个时刻，组件会自动调用执行的函数

    • componentWillMount（）函数在组件即将被挂载到页面的时刻自动执行
    • componentDidMount（）函数在组件被挂载到页面之后自动执行  
    以上两个函数只在组件挂载（组件第一次被放在页面上）的时候被执行         
    • shouldComponentUpdate（）函数在组件被更新之前，会自动执行
    • componentWillUpdate（）函数在组件被更新之前，会自动执行，但是它在shouldComponentUpdate之后执行，如果shuldComponentUpdate返回true，它才执行，如果返回false，它就不会被执行了。
    • componentDidUpdate（）函数在组件更新之后被执行。
    • componentWillReceiveProps（）函数，一个组件要从父组件接收参数，如果这个组件第一次存在于父组件中，不会执行，如果这个组件之前已经存在于父组件中，才会执行。
    • componentWillUnmount（）函数，当这个组件即将被从页面中剔除的时候，会被执行。
    
10. Redux
    • Redux 是 JavaScript 状态容器，提供可预测化的状态管理。可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。Redux 除了和 React 一起用外，还支持其它界面库。 它体小精悍（只有2kB，包括依赖）。
Redux = Reducer + Flux

11. 无状态组件
    • 当组件只有一个render()函数的时候，可以只返回一个函数，不需要再定义class类了，我们就可以用一个无状态组件来定义这个组件。其实无状态组件就是一个函数，同时这个函数会接收一个props，也就是父组件传递过来的内容，此时可以直接用props而不是this.props。由于普通的组件不仅要执行生命周期函数还要执行render(),而无状态组件只需要执行本函数就可以了，所以使用无状态组件可以提高性能。
    • 一般来说，UI组件可以用无状态组件。
    
12. Redux-thunk中间件
    • redux-thunk是在 action 和 store 中间的一个中间件，它实际上就是做了一个对dispatch函数的封装和升级，最原始的dispatch函数在接收到一个对象之后会把这个对象传递给store，而通过redux-thunk升级的dispatch函数会根据接收不同而执行不同的操作，如果接收到一个对象，那就直接把这对象传递给store，如果接收到一个函数，那就先执行这个函数，之后需要调用store的时候再调用store。
    • 使用redux-thunk的目的是可以在action里去写异步的代码【之前的action只能是一个对象，而使用了redux-thunk中间件之后，action也可以是一个函数了，可以使用store.dispatch（action）把这个函数发送给store了。之后store会自动执行这一段函数，而这一段函数对应的内容定义在actionCreators中，它返回一个axios请求，先取json的数据，然后获取数据，接下来继续走redux的流程 <先创建一个action调用initListAction，然后调用store.dispatch方法，其中的store.dispatch方法通过return（dispatch）接收到dispatch方法，故而直接使用dispatcch(action)即可> 来改变store的数据】
    • 使用redux-thunk的好处：如果把异步函数放在组件的生命周期函数中去写，这个生命周期函数可能会变得越来越复杂，组件会变得越来越大。所以借助redux-thunk来把这些复杂的业务逻辑或者异步函数拆分到一个地方去管理，带来的好处就是当去做自动化测试的时候会很简单。

    
    整个流程：ui组件触发action创建函数 ---> action创建函数返回一个action ------> action被传入redux中间件(被 saga等中间件处理) ，产生新的action，传入reducer-------> reducer把数据传给ui组件显示 -----> mapStateToProps ------> ui组件显示
    
13. Redux-saga中间件（https://www.jianshu.com/p/6f96bdaaea22）
    • 概述：redux-saga是一个用于管理redux应用异步操作的中间件，redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理，可以用来代替redux-thunk中间件。
    • 这意味着应用的逻辑会存在两个地方
    (1) reducer负责处理action的stage更新
    (2) sagas负责协调那些复杂或者异步的操作
    • sagas是通过generator函数来创建的
    • sagas可以被看作是在后台运行的进程。sagas监听发起的action，然后决定基于这个action来做什么 (比如：是发起一个异步请求，还是发起其他的action到store，还是调用其他的sagas 等 )
    • 在redux-saga的世界里，所有的任务都通过用 yield Effects 来完成 ( effect可以看作是redux-saga的任务单元 )
    • Effects 都是简单的 javascript对象，包含了要被 saga middleware 执行的信息
    • redux-saga 为各项任务提供了各种 （ Effects创建器 )
    • 因为使用了generator函数，redux-saga让你可以用 同步的方式来写异步代码
    • redux-saga启动的任务可以在任何时候通过手动来取消，也可以把任务和其他的Effects放到 race 方法里以自动取消

14. React-redux（https://www.cnblogs.com/xcsun/p/9146342.html）
    • 方便我们在React中使用redux