项目全部使用 hook，太香了，太爽了，太舒服了

因为缺少一个像 babel 那样的工具

已经不用了。ARV 三大框架，数据驱动，组件化开发，再也不用在业务逻辑里面写一堆选择器了，节省代码量，开发更轻松。
jquery 的一部分 api 都可以用原生的 javascript 来代替了。
兼容性也有 babel 来解决了。你要是觉得你的代码上能跑通 chrome87，下能兼容 ie7，无所谓了，随你开心。
webpack 编译、打包、压缩、上传 cdn，一个命令，一条龙服务。

前端上框架叫不好维护，后端上框架叫生态丰富。
前端加新的 api 叫瞎折腾，看不明白，后端加新的 api 叫 feature 。
老双标了

有真就有这个语法提案，不过需要 babel

https://github.com/ffmpegwasm/ffmpeg.wasm，ffmpeg 的 wasm 实现。可以满足基本的剪辑需求

没啥说法，推荐使用 useDispatch

除了`bin/webpack-dev-server`的错误（这个错误是 webpack-dev-server 的 v4 版本没有开发完，不支持 webpack-cli 的 v4 版本导致的），剩下的 webpack 不背锅。集成是 rails 该做好的，rails 没搞好，就把锅甩到前端、甩到 node 、甩到 webpack 这来了？
至于兼容性的，webpack 从 v3 到 v5 以后，配置项就没有多大的变化，照着 changelog 、迁移指南改一改就行。不想改的 package.json 锁版本也没人拦着啊。至于说改了一大堆 api 的，那是 loader 和 plugin 的开发者需要关心的事情。

找到了个正在维护的 ffmpeg.wasm 的项目，准备用来替换 gif 图裁剪和视频裁剪转 gif 的后台服务，直接在浏览器上处理

没错，就是定时爬

原来 b 站不是大项目啊

最近的项目完全使用 react-hook 开发，是真的舒服。
在 react-hook 里就不要想着声明周期那一套，原来生命周期那一堆反而写起来很乱。
拿 useEffect 和生命周期函数做对比，是为了让开发者能了解 useEffect，在 class 组件和 function 组件内如何实现相同的功能。

```javascript

// class
class ClassComponent extends React.Component {
constructor() {
super();

this.state = {
data: this.props.data,
list: []
};
}

componentDidUpdate(prevProps, prevState) {
if (this.props.data !== prevProps.data) {
// do something
}

if (this.state.list !== prevState.list) {
// do something
}

if (this.props.data !== this.state.data) {
// do something
}
}

componentWillUnmount() {
// do something 1
// do something 2
}
}


// function hook
function FunctionComponent(props) {
const [list, setList] = React.useState([]);

React.useEffect(function() {
// do something

return function() {};
}, [props.data]);

React.useEffect(function() {
// do something
}, [list]);
}

```

class 组件的声明周期是渲染 /重新渲染 /组件卸载时，你需要自己来判断是哪些值变了，哪些值没变，所以在 class 组件的生命周期内可能会充斥着一堆的 if else 的判断。
function 组件的渲染 /重新渲染 /组件卸载，是由哪个值的变化引起的，然后执行这个值被依赖的 hook，即当这个值变化时，执行什么操作，反而更一目了然。

用呗，访问量不大的话，还没到考虑性能的时候

const nextConfig = withLess({
webpack(config, options) {
// config.module.rules
// 在 rules 里面找到 less 文件的 loader，添加 exclude，忽略 node_modules 目录内的文件


// antd 的 less-loader
const { rules } = config.module;
const { use } = rules[rules.length - 1];
const loaders = options.isServer
? ['css-loader/locals']
: [isDev ? 'style-loader' : use[0], 'css-loader'];

config.module.rules.push({
test: /.*\.less$/,
use: [
...loaders,
{
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true
}
}
}
],
include: []
});

if (options.isServer) {
// antd 打包，而不是使用 node 的 require 方法引入，然后可以配置 antd 的按需加载
const externalsFunc = config.externals[config.externals.length - 1];

config.externals[config.externals.length - 1] = function(context, request, callback) {
if (/(antd|rc-|css-animation|@ant-design|highlight)/i.test(request)) {
return callback();
}

return externalsFunc(context, request, callback);
};
} else {
config.node = {
fs: 'empty',
path: 'empty'
};
}


return config;
}
});

你可以试一试

给你的建议：
1 、列表可以用 table 。
2 、不要用滚动加载（这种系统最好不要加一些自以为能让用户体验更好的效果）！！！用分页，每页显示固定条数。而且你的表格头还有排序。后加载的数据排序排到了前面，用户体验就很不好。而且用滚动加载，以后功能扩展，做查询什么的就会很麻烦。
3 、排序让后端来做，点击排序后，刷新当前分页的数据。
4 、建议用 vue + vue-router 来做这块的功能。原因是因为你点击文件夹，渲染了一个新的表格，这种用切换路由控制 html 渲染的方式，比你用 jquery 修改 html 改来改去方便多了。而且 vue + vue-router 还可以直接通过<script></script>接入项目。
5 、系统开发建议用 vue 替换 jquey 。你用 vue 相比用 jquery 开发，代码内少了一大堆 DOM 操作的代码。你只要改改数据，vue 自动帮你修改界面、绑定方法，岂不美哉。

这个和 vue 没关系，用 css 动画做

你需要的是 schema 来验证

拿这个搞过微博发博提醒，集资播报，集资抽卡，qq 群内定时发送消息，qq 群新人入群的欢迎，还有 app 内信息的搬运。这回是真的没法搞了