注册账号登录
吴世剑
小度鱼作者,野生设计师,野生程序员。
关注

使用TypeScript 、React(Hook)、Redux(Hook)将网站重写了一遍,测试版本已在上线运行。

这是一次较大的改动,虽然UI上看不出变化,但几乎所有的代码都有重写了一遍,代码略粗糙,因此可能会出现一些的bug,但总归跌跌撞撞能把测试版本先发布了。

下面来说几点重写的感受。

1、React Hook

将所有class类组件重写成了函数组件,给我的感觉,函数组件让代码逻辑更加简洁更加有序了。

2、TypeScript

说实话TS还是有一点繁琐,说一点显见的好处,就是在函数组件中可以声明接口,定义接口的参数以及参数的类型,如果使用了错误的参数或类型,会有错误提醒(需要在VSCode),这种严格的方式,可以降低代码错误率,有助于多人协作,让组件更规范严谨。

3、Redux Hook

redux hook 对比前2个是最轻松的,只用引用方式上改动一下,actions、reducers代码可以完全不变。但如果要从js改成ts这里还是需要修改代码。

最后用一个相同逻辑的类组件与函数组件的代码做对比(伪代码),是不是函数组件代码更优雅哈。

类组件

import React from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { loadPostsList } from '@actions/comment';
import { getPostsListById } from '@reducers/comment';

@connect(
(state, props) => ({
list: getPostsListById(state, id)
}),
dispatch => ({
loadList: bindActionCreators(loadPostsList, dispatch)
})
)
export default class PostsList extends React.Component {

static propTypes {
id: PropTypes.string.isRequired,
filters: PropTypes.object.isRequired
}

static defaultProps {
showPagination: false,
scrollLoad: false
}

constructor(props) {
super(props);
this.state = {
loading: false
}
}

async componentDidMount() {
const { list, loadList, id, filters } = this.props;
if (!list) {
this.setState({ loading: true });
await loadList({ id, filters });
this.setState({ loading: false });
}
}

render() {
const { list } = this.props;
const { loading } = this.state;

return <div>
{loading ? <div>loading...</div> : null}
{list && list.map((item, key)=>{
return <div key={key}>{item}</div>
})}
</div>
}

}

函数组件

import React, { useState, useEffect } from 'react';
import { useSelector, useStore } from 'react-redux';
import { loadPostsList } from '@actions/posts';
import { getPostsListById } from '@reducers/posts';

interface Props {
id: string,
filters: object,
showPagination?: boolean,
scrollLoad?: boolean
}

export default function({ id, filters, showPagination = false, scrollLoad = false}: Props) {

const [ loading, setLoading ] = useState();
const list = useSelector(state=>loadPostsList(state, id));
const store = useStore();
const loadList = (args)=>getPostsListById(args)(store.dispatch, store.getState);

const componentDidMount = async function() {
if (!list) {
setLoading(true);
await loadList({ id, filters });
setLoading(false);
}
}

useEffect(()=>{
componentDidMount()
},[]);

return <div>
{loading ? <div>loading...</div> : null}
{list && list.map((item, key)=>{
return <div key={key}>{item}</div>
})}
</div>
}
5条评论 / 21条回复

点赞位置变了,以为没有了呢。图标换文字了。

回复

那部分UI还没调整完成就先上线了,后面应该还会有所变化。

6月17日1 人赞
回复

啥时候把代码提交上来,学习下。

还有,回复的内容点击编辑会报错

本来要上传一个报错图片,但上传图片有问题。

上传图片,上传不成功,无报错。

6月17日
回复

代码还需要整理一下,这周应该会提交到github。

6月17日
回复

嗯。

6月17日
回复

赞,我也觉得react-hook舒服很多

6月18日1 人赞
回复

@吴世剑 TypeScript写前段代码有什么非常明显的好处吗,相对的改动会不会有多大呢?

另外如果觉得用TypeScript改写,开发环境需要怎样的特殊配置呀

回复

目前替换明显好处就是在于,定义函数的时候,你可以定义接口的参数与类型,以及返回值参数与类型,以及可以定义参数是否是必须或可选。

这样下次自己阅读和别人阅读这个块函数代码的时候,一眼就知道这个函数需要哪些参数,并会返回什么数据格式。例如如下

// 接口参数

interface Params {
title: string,
content: string,
topic_id: string,
device_id?: number
}

// 返回结果

type Result = {
success: boolean
}

export default const addPosts = ({ title, content, topic_id, device_id }: Params): Result => {
// other code...
return {
success: true
}
}

并且在VScode中,如果调用这个函数,参数如果是错的或缺少的,在代码还未运行的时候,就会有警告。

全面切换TS的话,改动还是比较大,需要付出一些成本。

前端使用TS,我是使用的babel-preset-typescript

https://babeljs.io/docs/en/babel-preset-typescript#docsNav

6月20日1 人赞
回复

👍

6月27日
回复

@吴哥,重写后的前端啥时候可以上传到github?

回复

最新版本的代码在develop分支,还没有提交到master。

https://github.com/54sword/xiaoduyu.com/tree/develop

7月4日
回复

个人页面 木有背景


回复

评论图片 好像不能点开 放大

7月5日
回复

个人页面背景的问题,已修复还没提交代码。

图片不能放大的问题,确实有问题,问题已记录,到时候修复一下。

7月5日
回复

markdown 发出来内容,图片也不能放大。

7月5日
回复

收到,应该是同一个问题。

7月5日
回复


点通知->未读消息或者全部,点击箭头所示的链接,提示该评论不存在。不知道是不是ID调用错了了。

附个地址:https://www.xiaoduyu.com/comment/5d1ea8f24029554c79daa615

7月5日
回复

应该也是一个bug,感谢反馈!

7月5日
回复

收到了新通知


点击这里,一直处于加载中的状态,好像也没有什么错误。

7月5日
回复

图片大图预览与评论页面的问题,已修复,再次感谢反馈!

7月5日
回复

嗯。评论不存在的,现在还没有好。

7月5日
回复

控制台,有个。index.ejs 一直报404错误,导致 sw.js 也报错,看看能不能优化一下。

7月5日
回复
还有 4 条评论
吴世剑
小度鱼作者,野生设计师,野生程序员。
关注私信
308
关注
107
粉丝
155
帖子