Continuous learning is essential if you want to stay a programmer.
People usually prefer a team with a better technical atmosphere when looking for a job, because it can help them grow better, but not every team has such an atmosphere. So the idea came up that I wanted to build a place where some people could record what they learned. This will often be a small dot and may not be enough to write an article. However, this knowledge may not be known by many people, so it is a great thing to let others learn this knowledge through this way of recording.
If you want to be a part of this record, you are welcome to contribute, the address is here.
A total of 37 people contributed what they learned this week, and selected some good ones to share and put into writing. More detailed content is recommended to read in the warehouse.
TS is used intypeofKeyword can automatically get the data type
When writing React projects, there are times when you might have a default value for state, such as:
const initialState = {
username: ' '.mobile: ' '.isVip: false.addresses: [],
}
type IState = typeof initialState
class Comp extends Component<any.IState> {
constructor(props) {
super(props);
this.state = {
...initialState
};
}
}
Copy the codeThis eliminates the need to separate the initial value of state from the type of state.
An operation
Note that bitwise operations work on 32-bit integers, so accuracy can be lost
- Use “|” integer
let num=1.5
num=num|0; / / 1
Copy the code- With “> >” in half
let num=4;
num=num>>1; / / 2
Copy the code- With “> >” double
let num=2;
num=num<<1; / / 4
Copy the code- Swap the “^” with the “^”
let a=1;
let b=2;
a^=b;
b^=a;
a^=b;
// a===2,b===1
Copy the code- Use “&” to determine odd numbers
let n=3;
let m=4;
n&1= = =1; / / true odd
m&1= = =1; / / false even
Copy the code- Use “~” to determine whether the item exists
let firstname="Ma";
let fullname="Jack Ma";
letisExist=!! ~fullname.indexOf(firstname);// true
Copy the codeThe arguments of the pit
Note that in strict mode, this problem is not present
- When the function is not in strict modeThere is nocontains
The remaining parameters,The default parametersandDeconstruction assignment, then the values in the Arguments object track the values of the arguments (and vice versa)
function sidEffecting(ary) {
ary[0] = ary[2];
}
function bar(a,b,c) {
c = 10 // Note that this modifies the arguments in the arguments object
sidEffecting(arguments);
return a + b + c;
}
bar(1.1.1); / / 21
Copy the code- When the function is not in strict modeThere arecontains
The remaining parameters,The default parametersandDeconstruction assignment, then the values in the Arguments object do not track the values of the arguments (and vice versa)
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
Copy the codeCanvas text gradient effect
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)
Copy the codeEffect diagram
ES6 Proxy Deeply proxies an object
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 (typeofobject ! = ='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');
Copy the codeFormat a small function of type 04:19 in seconds
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
Copy the codeHooks conflict with react-hot-loader
The React project was updated to the latest version by hooks. At that time, I found the problem through Google and solved the problem after upgrading the React-hot-loader package. In order to continue the work, I did not know the specific cause.
Today, when I have time, I searched some information and summarized the content:
The following error occurs with correct use of hooks:
Uncaught Error: Hooks can only be called inside the body of a function component.
Copy the codeHooks do have limitations that must be used in function components, but I did use them correctly. So I searched a wave of data and found a issus with the same problem as mine: Incompatibility with React-hot-loader.
While reading issus, the react-hot-loader developers give the following answers:
Stateless components (function components) are converted to class components because stateless components have no updated methods.
How React Hot Loader Works is also provided in the official document.
In order to render the React – Tree, all stateless components had to be converted to stateless class components.
The last
This week’s posts were of high quality and I learned something from them.
This is something that needs to be shared to be sustainable, and I can’t do it alone. Everyone is welcome to participate in this event. The address is here.
Finally, you can join groups to communicate and learn.
