react学习初总结

这是第一次接触react,以前都是在用vue做项目，突然来看react的语法其实还是特别的陌生，感觉非常的绕，但是总体感觉react的把函数式编程还是体现的淋漓尽致的，react是单向数据流的，而vue是双向绑定，react的状态改变是手动会触发，而vue是响应式，每个状态都是监听的，在中小型项目中vue项目确实用起来更加的方便，但是在一些大型项目中还是react最佳，因为vue的状态低响应式的，当状态特别多的时候，watcher也会很多，会导致卡顿等问题，而react的状态手动去改变的，更加可控。

在看了react的文档之后，用react+react-redux++react-router-dom+react-loadable+antd+styled-components+react-transition-group+immutable.js做了一个仿简书首页。

1.react-redux是react的一个插件，主要用于做公共数据的管理，由于State是只读的，所以我们使用immutable.js来禁止之计改变里面的数据。

function mapStateToProps(state) {
  return { todos: state.todos }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ addTodo }, dispatch)
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoApp)

2.react-router-dom,主要用到的就是里面的路由跳转，同时我们为了能够避免掉单页面首屏加载慢的通病，配合了路由懒加载一起用

import Loadable from 'react-loadable';
import React from 'react';
//组件异步加载
const LoadableComponent = Loadable({
  loader: () => import('./'),
  loading(){
       return <div>正在加载</div>
   }
});

export default () => <LoadableComponent/>;

在使用懒加载的时候需要注意，在获取路由页面信息的时候。使用了异步组件加 载，要使用withRouter来获取到路由中的信息 export default connect(mapStateToProps,mapDispatchToProps)(withRouter(Detail));//这样才可以获取到路由中的参数。

3.styled-components，个人理解就是增强组件化，用css用js的形式导出，语法中和sass,less一样都具有嵌套，继承等语法，非常的好用。

4.react-transition-group，这是一个动画插件，主要就是用来做一些页面的动画功能，很强大，非常好用。