Если программисты хотят продолжать этим заниматься, необходимо непрерывное обучение.
Люди, ищущие работу, обычно предпочитают команду с лучшей технической атмосферой, потому что это может помочь им расти лучше, но не в каждой команде есть такая атмосфера. Поэтому мне пришла в голову идея создать место, где некоторые люди могли бы записывать то, что они узнали. Обычно это мелочи, и их может быть недостаточно для написания статьи. Но эта точка знания может быть неизвестна многим людям, поэтому было бы здорово позволить другим также изучить эту точку знания с помощью этого метода записи.
Если вы тоже хотите принять участие в этой записи, вы можете внести свой вклад,Адрес здесь.
На этой неделе в общей сложности 37 человек поделились тем, что они узнали, и выбрали несколько хороших, чтобы поделиться ими и интегрировать в текст.Более подробный контент рекомендуется прочитать на складе.
Используется в ТСtypeofКлючевые слова могут автоматически получать тип данных
При написании проектов React бывают случаи, когда ваше состояние может иметь значения по умолчанию, например:
const initialState = {
username: '',
mobile: '',
isVip: false,
addresses: [],
}
type IState = typeof initialState
class Comp extends Component<any, IState> {
constructor(props) {
super(props);
this.state = {
...initialState
};
}
}
Это избавляет от необходимости отдельно определять начальное значение состояния и тип состояния.
битовая операция
Обратите внимание, что битовая операция для 32-битного целого числа, поэтому точность может быть потеряна
- Используйте «|» для округления
let num=1.5
num=num|0; // 1
- Используйте «>>», чтобы взять половину
let num=4;
num=num>>1; // 2
- Используйте «>>», чтобы удвоить
let num=2;
num=num<<1; / / 4
- Поменять местами два значения с помощью «^»
let a=1;
let b=2;
a^=b;
b^=a;
a^=b;
// a===2,b===1
- Используйте «&» для нечетных чисел
let n=3;
let m=4;
n&1===1; // true 奇数
m&1===1; // false 偶数
- Используйте «~», чтобы проверить, существует ли элемент
let firstname="Ma";
let fullname="Jack Ma";
let isExist=!!~fullname.indexOf(firstname); // true
Яма аргументов
Обратите внимание, что в строгом режиме этой проблемы нет.
- Когда функция в нестрогом режименетВключать
剩余参数,默认参数а также解构赋值Затем значение аргументов параметров отслеживается объект (и наоборот)
function sidEffecting(ary) {
ary[0] = ary[2];
}
function bar(a,b,c) {
c = 10 // 注意这里，其实它修改的就是 arguments 对象里的参数
sidEffecting(arguments);
return a + b + c;
}
bar(1,1,1); // 21
- Когда функция в нестрогом режимеимеютВключать
剩余参数,默认参数а также解构赋值Тогда значение в объекте Arguments не будет отслеживать значение параметров (наоборот)
function sidEffecting(ary) {
ary[0] = ary[2];
}
function bar(a,b,c=3) {
c = 10
sidEffecting(arguments);
return a + b + c;
}
bar(1,1,1); // 12
Реализация эффекта градиента с помощью Canvas
var context = canvas.getContext('2d')
var g = context.createLinearGradient(0,0,canvas.width,0)
g.addColorStop(0, 'red')
g.addColorStop(0.5, 'blue')
g.addColorStop(1, 'purple')
context.fillStyle = g
context.font = '36px fantasy'
context.fillText('hello canvas', 0, 100)
Глубокий прокси-сервер ES6 для объекта
function deepProxy(object, handler) {
if (isComplexObject(object)) {
addProxy(object, handler);
}
return new Proxy(object, handler);
}
function addProxy(obj, handler) {
for (let i in obj) {
if (typeof obj[i] === 'object') {
if (isComplexObject(obj[i])) {
addProxy(obj[i], handler);
}
obj[i] = new Proxy(obj[i], handler);
}
}
}
function isComplexObject(object) {
if (typeof object !== 'object') {
return false;
} else {
for (let prop in object) {
if (typeof object[prop] == 'object') {
return true;
}
}
}
return false;
}
let person = {
txt: 123,
name: 'tnt',
age: 26,
status: {
money: 'less',
fav: [1, 2, 3]
}
};
let proxyObj = deepProxy(person, {
get(target, key, receiver) {
console.log(`get--${target}--${key}`);
return Reflect.get(target, key);
},
set(target, key, value, receiver) {
console.log(`set--${target}--${key}-${value}`);
return Reflect.set(target, key, value);
}
});
proxyObj.status.test = 13;
proxyObj.status.fav.push('33');
Небольшая функция, которая форматирует секунды как тип 04:19.
const convertDuration = time => {
let minutes = Math.floor(time / 60);
let seconds = Math.floor(time - minutes * 60);
minutes = String(minutes).length < 2 ? String(minutes).padStart(2,'0'): minutes;
seconds = String(seconds).length < 2 ? String(seconds).padStart(2,'0'): seconds;
return minutes + ":" + seconds;
};
convertDuration(308); // 05:08
convertDuration(6000); // 100:00
хуки конфликтуют с реагирующим горячим загрузчиком
Перед обновлением старого проекта React до последней версии я столкнулся с проблемой при использовании хуков. На тот момент проблему нашел через гугл.После обновления пакета react-hot-loader проблема решилась кстати.Для продолжения работы причину не знал.
Сегодня, когда у меня было время, я поискал некоторую информацию и резюмировал содержание:
Произошла следующая ошибка в случае надлежащего использования крючков:
Uncaught Error: Hooks can only be called inside the body of a function component.
У хуков есть ограничение, что они должны использоваться в функциональных компонентах, но я использовал их правильно. Итак, я искал волну информации и нашел проблему с той же проблемой, что и я:Incompatibility with react-hot-loader.
В процессе чтения issus я обнаружил, что разработчик react-hot-loader дал следующий ответ:
Это примерно означает, что компоненты без состояния (то есть функциональные компоненты) будут преобразованы в компоненты класса, потому что компоненты без состояния не могут обновляться.
Поэтому я поискал принцип работы react-hot-loader и нашел, что официалы тоже дали документ:How React Hot Loader works.
В содержании упоминается, что для рендеринга реагирующего дерева все компоненты без состояния должны быть преобразованы в компоненты класса без состояния.
наконец
Публикации на этой неделе высокого качества, и я кое-чему научился из них.
Это то, чем нужно поделиться со всеми, чтобы продолжать, и я не могу сделать это в одиночку. Все желающие могут принять участие в этом мероприятии.Адрес здесь.
Наконец, каждый может присоединиться к группе, чтобы общаться и учиться вместе.