第一个React项目总结

待我称王封你为后i 2022-01-19 03:21 206阅读 0赞

使用react编写了简书的主页、文章页，登录页，也算一个比较完整的react项目，收获不少。知道了一个项目正常开发流程，目录组织，一些常见的问题的应对方案，在此记录下。

# 搭建项目 #

*  使用create-react-app创建项目
 *  使用yarn安装依赖

# 目录组织 #

*  project
    
     *  src
        
         *  store（全局store）
            
             *  index.js（store出口）
             *  reducer.js（组合来自其他组件的reducer）
         *  common（公共组件）
            
             *  OneCommonComponent（一个公共组件的例子）
                
                 *  index.js（组件代码出口）
                 *  style.js（使用styled-components编写的css in js样式文件，使得组件的css私有化)
                 *  store
                    
                     *  index.js（store出口文件）
                     *  reducer.js（组件的reducer）
                     *  actionTypes.js（action的type以常量的形式定义在这里）
                     *  actionCreators.js（创建action的函数，以及异步的被包装成action的请求函数定义在这里）
                 *  components（组件的私有组件）
                    
                     *  OnePrivateCom1.js
                     *  OnePriveteCom2.js
         *  pages（非公共组件定义处）
            
             *  home（例子：一个Home组件)
                
                 *  index.js（组件代码出口）
                 *  style.js（使用styled-components编写的css in js样式文件，使得组件的css私有化)
                 *  store
                    
                     *  index.js（store出口文件）
                     *  reducer.js（组件的reducer）
                     *  actionTypes.js（action的type以常量的形式定义在这里）
                     *  actionCreators.js（创建action的函数，以及异步的被包装成action的请求函数定义在这里）
                 *  components（组件的私有组件）
                    
                     *  OnePrivateCom1.js
                     *  OnePriveteCom2.js

# 数据管理 #

*  使用redux
 *  使用react-redux简化对redux的操作
 *  使用redux中间件redux-thunk来支持异步action
 *  使用immutable.js
    
     *  对immutable对象命名作出约定，如 $list.get()
 *  分割store，通过combineReducers组装
    
     *  使用redux-immutable提供的combineReducers来使得合成reducer变成immutabe
 *  使用redux-immutable在redux中使用immutable.js
 *  使用redux-devtools调试工具

# css解决方案 #

*  使用styled-components来管理css
 *  vscode扩展vscode-styled-components提供语法高亮和自动补全

# 路由 #

*  使用react-router@4管理路由

# 如何实现动画效果 #

*  手动切换class
 *  通过定义keyframes
 *  使用css-transition-group

# 数据类型检查 #

*  使用React提供的propTypes检查数据类型

# 性能调优 #

*  重载shouldComponentUpdate函数，手动判断是否需要rerender
 *  组件尽量继承pureComponent（配合immutable.js使用）

转载于:https://juejin.im/post/5cda90dee51d4547587bf6cf