Autosave: 2023-02-14 15:37:40
This commit is contained in:
		
							parent
							
								
									4fc1257d30
								
							
						
					
					
						commit
						08764b0c3a
					
				
					 7 changed files with 131 additions and 23 deletions
				
			
		
							
								
								
									
										93
									
								
								.vscode/markdown-styles.css
									
										
									
									
										vendored
									
									
										Normal file
									
								
							
							
						
						
									
										93
									
								
								.vscode/markdown-styles.css
									
										
									
									
										vendored
									
									
										Normal file
									
								
							| 
						 | 
					@ -0,0 +1,93 @@
 | 
				
			||||||
 | 
					body {
 | 
				
			||||||
 | 
					    background: #000e07;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					h1, h2, h3, h4, h5, h6 {
 | 
				
			||||||
 | 
					    font-weight: 600;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					pre {
 | 
				
			||||||
 | 
					    background: #0f1610 !important;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					blockquote {
 | 
				
			||||||
 | 
					    border-left-color: #2f7e25;
 | 
				
			||||||
 | 
					    border-left-width: 3px;
 | 
				
			||||||
 | 
					    background: #637d7510;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					table {
 | 
				
			||||||
 | 
					  table-layout: fixed;
 | 
				
			||||||
 | 
					  width: 100%;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					th,
 | 
				
			||||||
 | 
					td {
 | 
				
			||||||
 | 
					  background: #637d7510;
 | 
				
			||||||
 | 
					  padding: 0.5rem;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					tbody tr:nth-child(odd) {
 | 
				
			||||||
 | 
					  background: #637d7510;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					tbody tr:nth-child(even) {
 | 
				
			||||||
 | 
					  background: #000e0740;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					thead {
 | 
				
			||||||
 | 
					    border-bottom-width: 0 !important;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					th {
 | 
				
			||||||
 | 
					    border-bottom: 0px !important;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					span.hljs-comment {
 | 
				
			||||||
 | 
					    color: #5a8055ad;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					span.hljs-string, span.hljs-params {
 | 
				
			||||||
 | 
					    color: #637d75;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					span.hljs-built_in, span.hljs-title.class_, span.hljs-name {
 | 
				
			||||||
 | 
					    color: #717f24;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					span.hljs-keyword {
 | 
				
			||||||
 | 
					    color: #2f7e25;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					span.hljs-number {
 | 
				
			||||||
 | 
					    color: #00e0c4;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					span.hljs-attr, span.hljs-subst,  span.hljs-variable {
 | 
				
			||||||
 | 
					    color: #327f77;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					span.hljs-variable.language_ {
 | 
				
			||||||
 | 
					    color: #7f2b27;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.code-line code, .code-line {
 | 
				
			||||||
 | 
					    color: #637d75 !important;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					code {
 | 
				
			||||||
 | 
					    font-size: 15px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					span.hljs-property {
 | 
				
			||||||
 | 
					    color: #2f6a7f;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					span.hljs-title.function_, span.hljs-function {
 | 
				
			||||||
 | 
					    color: #717f24 !important;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					span.hljs-literal {
 | 
				
			||||||
 | 
					    color: #18e000;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
| 
						 | 
					@ -7,7 +7,7 @@ tags:
 | 
				
			||||||
  - react-hooks
 | 
					  - react-hooks
 | 
				
			||||||
---
 | 
					---
 | 
				
			||||||
 | 
					
 | 
				
			||||||
# Memoization with `useCallback` and `useMemo`
 | 
					# Memoization with useCallback and useMemo
 | 
				
			||||||
 | 
					
 | 
				
			||||||
## Rationale
 | 
					## Rationale
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -23,7 +23,7 @@ The `useCallback` hook is used to wrap functions. It tells React to not re-creat
 | 
				
			||||||
 | 
					
 | 
				
			||||||
`useCallback` returns a memoized version of the callback function it is passed. This means that the function object returned from useCallback will be the same between re-renders.
 | 
					`useCallback` returns a memoized version of the callback function it is passed. This means that the function object returned from useCallback will be the same between re-renders.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
Remember that in JavaScript, functions are objects and components are functions. As a result, every time a component containing a function re-renders, it creates a new instance of the function in memory.
 | 
					Remember that in JavaScript, functions are objects and components are functions. As a result, every time a component containing a function re-renders, it create a new instance of the function in memory.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
> Given the same dependency value, the `useCallback` hook returns the same function instance between renderings (aka memoization).
 | 
					> Given the same dependency value, the `useCallback` hook returns the same function instance between renderings (aka memoization).
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,17 +1,17 @@
 | 
				
			||||||
# BBC Python Course notes
 | 
					# BBC Python Course notes
 | 
				
			||||||
 | 
					
 | 
				
			||||||
## TODO:
 | 
					## Day 2
 | 
				
			||||||
 | 
					
 | 
				
			||||||
## Numbers
 | 
					With lists you have to use copy if you wish to make a new version. You cannot just reassign to a new version. This will still update the original. Since it copies the pointer.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
## Control flow
 | 
					Distinguish functions that will create new list and methods which will modify existing list
 | 
				
			||||||
 | 
					
 | 
				
			||||||
### Conditionals
 | 
					Functions: named parameter passing, use for default parameter values
 | 
				
			||||||
 | 
					
 | 
				
			||||||
### While loops
 | 
					Python does not have constants but has a convention of upper case to mimic constants
 | 
				
			||||||
 | 
					
 | 
				
			||||||
### For loops
 | 
					More on addresses and pointers in Python
 | 
				
			||||||
 | 
					
 | 
				
			||||||
Add example of slightly odd ternary structure
 | 
					With classes we don't need to use `new` when instantiating an instance of a class.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
While, when we don't know how long
 | 
					You do not need to define properties in classes if they exist in the constructor
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -57,15 +57,31 @@ tup3 = ('apple', 'pear', 'orange', 'plum', 'apple')
 | 
				
			||||||
for x in tup3:
 | 
					for x in tup3:
 | 
				
			||||||
    print(x)
 | 
					    print(x)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					"""
 | 
				
			||||||
 | 
					apple
 | 
				
			||||||
 | 
					pear
 | 
				
			||||||
 | 
					orange
 | 
				
			||||||
 | 
					plum
 | 
				
			||||||
 | 
					apple
 | 
				
			||||||
 | 
					"""
 | 
				
			||||||
 | 
					
 | 
				
			||||||
print(tup3.count('apple'))
 | 
					print(tup3.count('apple'))
 | 
				
			||||||
print(tup3.index('pear'))
 | 
					print(tup3.index('pear'))
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					# 2
 | 
				
			||||||
 | 
					# 1
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
if 'orange' in tup3:
 | 
					if 'orange' in tup3:
 | 
				
			||||||
    print('orange is in the Tuple')
 | 
					    print('orange is in the Tuple')
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					# orange is in the Tuple
 | 
				
			||||||
 | 
					
 | 
				
			||||||
tuple1 = (1, 3, 5, 7)
 | 
					tuple1 = (1, 3, 5, 7)
 | 
				
			||||||
tuple2 = ('John', 'Denise', 'Phoebe', 'Adam')
 | 
					tuple2 = ('John', 'Denise', 'Phoebe', 'Adam')
 | 
				
			||||||
tuple3 = (42, tuple1, tuple2, 5.5)
 | 
					tuple3 = (42, tuple1, tuple2, 5.5)
 | 
				
			||||||
print(tuple3)
 | 
					print(tuple3)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					# (42, (1, 3, 5, 7), ('John', 'Denise', 'Phoebe', 'Adam'), 5.5)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -33,7 +33,7 @@ echo /tmp/{1..3}/file.txt
 | 
				
			||||||
/tmp/1/file.txt  /tmp/2/file.txt /tmp/3/file.txt
 | 
					/tmp/1/file.txt  /tmp/2/file.txt /tmp/3/file.txt
 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
```
 | 
					```bash
 | 
				
			||||||
echo {1..5}
 | 
					echo {1..5}
 | 
				
			||||||
1 2 3 4 5
 | 
					1 2 3 4 5
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -46,7 +46,7 @@ a b c
 | 
				
			||||||
 | 
					
 | 
				
			||||||
We can also set sequences. If we wanted to count to twenty in intervals of two
 | 
					We can also set sequences. If we wanted to count to twenty in intervals of two
 | 
				
			||||||
 | 
					
 | 
				
			||||||
```
 | 
					```bash
 | 
				
			||||||
echo {1..20..2}
 | 
					echo {1..20..2}
 | 
				
			||||||
1 3 5 7 9 11 13 15 17 19
 | 
					1 3 5 7 9 11 13 15 17 19
 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -15,7 +15,7 @@ So say we have this object:
 | 
				
			||||||
 | 
					
 | 
				
			||||||
```js
 | 
					```js
 | 
				
			||||||
const age = {
 | 
					const age = {
 | 
				
			||||||
  name: 'Thomas',
 | 
					  name: "Thomas",
 | 
				
			||||||
  yearOfBirth: 1988,
 | 
					  yearOfBirth: 1988,
 | 
				
			||||||
  currentYear: 2021,
 | 
					  currentYear: 2021,
 | 
				
			||||||
  ageNow: function () {
 | 
					  ageNow: function () {
 | 
				
			||||||
| 
						 | 
					@ -43,7 +43,7 @@ We could now re-write the first `age` object as an object of type `Age` :
 | 
				
			||||||
let thomas: typeof Age;
 | 
					let thomas: typeof Age;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
thomas = {
 | 
					thomas = {
 | 
				
			||||||
  name: 'Thomas',
 | 
					  name: "Thomas",
 | 
				
			||||||
  yearOfBirth: 1988,
 | 
					  yearOfBirth: 1988,
 | 
				
			||||||
  currentYear: 2021,
 | 
					  currentYear: 2021,
 | 
				
			||||||
  ageNow: function () {
 | 
					  ageNow: function () {
 | 
				
			||||||
| 
						 | 
					@ -67,7 +67,7 @@ We could then create objects based on this:
 | 
				
			||||||
 | 
					
 | 
				
			||||||
```tsx
 | 
					```tsx
 | 
				
			||||||
const thomas: Age = {
 | 
					const thomas: Age = {
 | 
				
			||||||
  name: 'Thomas',
 | 
					  name: "Thomas",
 | 
				
			||||||
  yearOfBirth: 1988,
 | 
					  yearOfBirth: 1988,
 | 
				
			||||||
  currentYear: 2021,
 | 
					  currentYear: 2021,
 | 
				
			||||||
  ageNow: function () {
 | 
					  ageNow: function () {
 | 
				
			||||||
| 
						 | 
					@ -97,10 +97,10 @@ With custom (object types) this means that the following expression of an object
 | 
				
			||||||
 | 
					
 | 
				
			||||||
```tsx
 | 
					```tsx
 | 
				
			||||||
const martha = {
 | 
					const martha = {
 | 
				
			||||||
  name: 'Martha',
 | 
					  name: "Martha",
 | 
				
			||||||
  yearOfBirth: 1997,
 | 
					  yearOfBirth: 1997,
 | 
				
			||||||
  currentYear: 2021,
 | 
					  currentYear: 2021,
 | 
				
			||||||
  gender: 'female',
 | 
					  gender: "female",
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const addition: Age = martha;
 | 
					const addition: Age = martha;
 | 
				
			||||||
| 
						 | 
					@ -110,10 +110,10 @@ But if we tried to add this extra property whilst defining `martha` as an instan
 | 
				
			||||||
 | 
					
 | 
				
			||||||
```tsx
 | 
					```tsx
 | 
				
			||||||
const martha: Age = {
 | 
					const martha: Age = {
 | 
				
			||||||
  name: 'Martha',
 | 
					  name: "Martha",
 | 
				
			||||||
  yearOfBirth: 1997,
 | 
					  yearOfBirth: 1997,
 | 
				
			||||||
  currentYear: 2021,
 | 
					  currentYear: 2021,
 | 
				
			||||||
  gender: 'female',
 | 
					  gender: "female",
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -134,17 +134,17 @@ function logPoint(p: Point) {
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
// logs "12, 26"
 | 
					// logs "12, 26"
 | 
				
			||||||
const point = {x: 12, y: 26};
 | 
					const point = { x: 12, y: 26 };
 | 
				
			||||||
logPoint(point);
 | 
					logPoint(point);
 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
Shape matching only requires a subset of the object's fields to match:
 | 
					Shape matching only requires a subset of the object's fields to match:
 | 
				
			||||||
 | 
					
 | 
				
			||||||
```tsx
 | 
					```tsx
 | 
				
			||||||
const point3 = {x: 12, y: 26, z: 89};
 | 
					const point3 = { x: 12, y: 26, z: 89 };
 | 
				
			||||||
logPoint(point3); // logs "12, 26"
 | 
					logPoint(point3); // logs "12, 26"
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const rect = {x: 33, y: 3, width: 30, height: 80};
 | 
					const rect = { x: 33, y: 3, width: 30, height: 80 };
 | 
				
			||||||
logPoint(rect);
 | 
					logPoint(rect);
 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1 +0,0 @@
 | 
				
			||||||
{}
 | 
					 | 
				
			||||||
		Loading…
	
	Add table
		
		Reference in a new issue