写过一些react-native的代码和react的demo,也用过typescript。
正好我的project站需要重构,而之前写前端框架的生命周期这篇博文写了个demo,就索性选择了react+typescript方案重新写一个简单的单页站。
基本语法与react-native大概没什么两样,不同的是在react-native中我用的是es6,在这里用了typescript。
生命周期本身大同小异,没什么好讲的。
写的时候有几点选择:
1.年初的时候一直酝酿,有好多界面方面的想法,不过终究因自己的想象力欠缺,实在不知道怎么布局好,就索性参照了github repos的样式布局。
2.这次没有和react-native相通的地方是尝试在tsx代码用直接import less
样式文件,而在react-native中,我都是用const styles
来解决。前者引用方式在web中感觉很方便,而后者还是不太习惯其写法。
3.在react的tsx
代码中,父组件和子组件的传值变得和在react-native有些不一样。在react-native中,子组件调用父组件,只需要在父组件中定义事件,子组件用props
来访问可以直接拿到;而在这里,这同时需要在子组件初始化定义事件类型,这大概是由typescript决定的吧。
4.在使用webpack打包的时候,webpack版本已经升级到4系列,最大变化感觉是:
Webpack1
module: {
loaders: [{
test: /\.(less|css)$/,
loader: "style!css!less!postcss"
}, {
test: /\.json$/,
loader: 'json'
}]
}
Webpack4
module: {
rules: [{
test: /\.(less|css)$/,
use: [
"style-loader",
"css-loader",
"less-loader",
"postcss-loader"
]
}]
};
(这里引用的是网上的一段代码)
正好借助这次机会练习一下久未写的react感受一下,这样看下来,几大常见框架的难易程度已经很明显了:
Vue < AngularJS < Backbone< React(Preact) < Angular
最后留一个上面的源码:fleece
二级域名 project 已经更新为 fleece, 对于 fleece 的下个功能更新,可能需要在其他时间了。
后面我的重心开始继续转到今年的计划上,这里权当是个小插曲。