react项目jianshu介绍

Posted 2021-08-30 ThinkerWing

jianshu

• 项目功能介绍
• 第三方库的使用和优化
• 不足和思考

项目功能介绍

项目地址https://gitee.com/thinkerwing/jianshu
react-devtools https://blog.csdn.net/daddykei/article/details/119225518

搜索框功能动画及推荐和换一换功能

登录登出功能

下拉点击更多、回到顶部、详情页及路由跳转功能开发

第三方库的使用和优化

• 使用 styled-components 加速 React 开发

npm install --save styled-components

styled-components 是一个常用的 css in js 类库。和所有同类型的类库一样，通过 js 赋能解决了原生 css 所不具备的能力，比如变量、循环、函数等。诸如 sass&less 等预处理可以解决部分 css 的局限性，但还是要学习新的语法，而且需要对其编译，其复杂的 webpack 配置也总是让开发者抵触。而 styled-components 很好的解决了这些问题，很适合 React 技术栈的项目开发。

• combineReducers

reducer最终返回的是一个完整的state，combineReducers起的作用就是将每个子reducer拼接起来返回一个完整的state
immutable.js帮助我们生成immutable对象，不可变更

• public/api 本地模拟json数据
  当只有分支比较少的时候，if效率比switch高（因为switch有跳转表） 分支比较多，那当然是switch效率高，看起来也更简洁。

if (action.type === constants.SEARCH_FOCUS) {
        // immutable对象的set方法，会结合之前immutable对象的值
        // 和设置的值，返回一个全新的对象
		return state.set('focused', true)
	}
	if (action.type === constants.SEARCH_BLUR) {
		return state.set('focused', false )
	}
    if (action.type === constants.CHANGE_LIST) {
		return state.set('list', action.data)
	}

switch(action.type) {
		case constants.SEARCH_FOCUS:
			return state.set('focused', true);
		case constants.SEARCH_BLUR:
			return state.set('focused', false);
		case constants.CHANGE_LIST:
			return state.merge({
				list: action.data,
				totalPage: action.totalPage
			});
		case constants.MOUSE_ENTER:
			return state.set('mouseIn', true);
		case constants.MOUSE_LEAVE:
			return state.set('mouseIn', false);
		case constants.CHANGE_PAGE:
			return state.set('page', action.page);
		default:
			return state;
	}

• 结构赋值
  const { focused, list } = this.props
  后面就无需一直｛this.props.xxxx｝

• redux-thunk解决
  使用 redux 的异步 action 时浏览器报错：

Error: Actions must be plain objects. Use custom middleware for async actions.

import { createStore, compose, applyMiddleware } from 'redux'
import thunk from 'redux-thunk';
import reducer from './reducer'
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers(
	applyMiddleware(thunk)
));
export default store

• 在React中使用react-router-dom路由

使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。

◇通过函数跳转
<HashRouter history={hashHistory}>
◇url传参
<Route exact path="/detail/:id" component={Detail}/>

• React 性能优化之组件动态加载（react-loadable）

React 项目打包时，如果不进行异步组件的处理，那么所有页面所需要的 js 都在同一文件中（bundle.js），整个js文件很大，从而导致首屏加载时间过长。

不足和思考

缺少hooks的使用，及部分功能不够完善。

极客时间《React Hooks 核心原理与实战》
引入 Hooks 的概念之后，函数组件就具备了状态管理、生命周期管理等能力，几乎可以实现原来的 Class 组件具有的所有能力。函数组件能和已有Class组件无缝衔接。函数组件带来的简洁写法和直观的逻辑重用能力，不仅仅是写法的区别，更是开发思路的转变。