yooocen
commented
6 years ago import * as React from 'react'; import { EmitterStore } from 'framework/store/emitter-store';
export abstract class BaseComponent<P, S> extends React.Component<P, S> {
protected $window = (window as any);
protected ha = this.$window.ha;
// ----------------------- constructor --------------------------
props: any;
state: any;
constructor(props: any) {
super(props);
}
// ------------------------ i18n --------------------------------
protected getMessage(key: string, defaultMessage?: string, params?: any) {
if (!key) {
return null;
}
const props: any = this.props;
// 如果找不到国际化对象，直接返回defaultMessage
if (!props.intl) {
return defaultMessage || key;
}
const intlParams = params || {};
return props.intl.formatMessage({ id: key, defaultMessage: defaultMessage }, intlParams);
}
/**
* getIntlField({
* chsDesc: '描述',
* engDesc: 'Description'
* }, 'desc')
*/
protected getIntlField(obj: any, field: string) {
if (!field) {
return null;
}
const props: any = this.props;
// 如果找不到国际化对象中的前缀字段，直接返回obj[field]
if (!props.intl || !props.intl.messages) {
return obj[field];
}
// desc =====> chsDesc
const intlField = props.intl.messages.fieldPrefix + field.substr(0, 1).toUpperCase() + field.substr(1);
return obj[intlField];
}
/**
* 判断当前在哪个locale下
*
* isLocale('zh')
*/
protected isLocale(locale: string) {
if (!locale) {
return false;
}
const props: any = this.props;
// 如果找不到国际化对象，直接返回false
if (!props.intl) {
return false;
}
return props.intl.locale === locale;
}
/**
* 将日期格式化成yyyy-MM-dd
*/
protected formatDate(date: Date) {
const year: any = date.getFullYear();
let month: any = date.getMonth();
if (month < 10) {
month = '0' + month;
}
let day: any = date.getDay();
if (day < 10) {
day = '0' + day;
}
return `${year}-${month}-${day}`;
}
// ------------------------ listener ----------------------------
private allListeners: any = [];
/**
* componentWillMount() {
* this.addListener(EmitterKeys.Dummy, (data)=>{
* this.setState({
* countryList:data
* });
* }, true);
* }
*
*/
protected addListener(key: string, callback: (data: any) => void, initialInit: boolean = true) {
if (!key || !callback) {
return;
}
// 注册
this.allListeners.push(EmitterStore.addListener(key, callback));
// 初始化数据
if (!!initialInit) {
const data = EmitterStore.getData(key);
if (!!data) {
callback(data);
}
}
}
public componentWillUnmount() {
//移除事件监听
this.allListeners.forEach((listener) => {
listener.remove();
})
}
/**
* 判断组件是否需要重新渲染
*
* @param {Object} nextProps - 下一个Props对象
* @param {Object} nextState - 下一个state对象
* @return {boolean} 组件是否需要渲染
*/
public shouldComponentUpdate(nextProps: any, nextState: any) {
return !this.shallowEqual(this.props, nextProps) ||
!this.shallowEqual(this.state, nextState);
}
/**
* 只展开对象下面的第一层来比较
* 如果是普通对象，比较引用。
*
* @param {Object} objA - 左值
* @param {Object} objB - 右值
* @return {boolean} 对象是否相等
*/
private shallowEqual(objA: any, objB: any) {
if (objA === objB) {
return true;
}
if (typeof objA !== 'object' || objA === null ||
typeof objB !== 'object' || objB === null) {
return false;
}
const keysA = Object.keys(objA);
const keysB = Object.keys(objB);
if (keysA.length !== keysB.length) {
return false;
}
// Test for A's keys different from B.
const bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB);
for (let i = 0; i < keysA.length; i++) {
if (!bHasOwnProperty(keysA[i]) || objA[keysA[i]] !== objB[keysA[i]]) {
return false;
}
}
return true;
}}
webpack的使用
webpack的一些坑的解决
1. babel-loader更新到最新的版本不可用
npm uninstall webpack --save-devnpm install webpack@2.1.0-beta.22 --save-dev这里注意这个webpack 2.x beta.22又是一个大坑，要更新到25，所以这个问题的关键就是webpack 2.x的版本的问题
2. Hot Module Replacement is disabled
这个问题出现于配置 webpack-dev-server 的时候，需要再配置一个 react-hot-loader ，需要增加下面的插件
3. option.preset
在写 babel-loader 的时候需要注意的是增加一下的选项
4.module.hot 与 ts
其实没什么办法解决，ts暂时似乎识别不了HMR为module挂载hot这件事，唯一的办法就是改成jsx，然后babel去load
5.node server之后一片空白
考虑是不是只写了export，没写default
6.webpack4.0的问题
webpack4.0需要一个webpack-cli，我们还是在webpack2.7下写代码
常用的loader