update code

CSS/CSS-Note-1.md

@@ -178,6 +178,14 @@ overflow: hidden;
 text-overflow: ellipsis;
 ```
 
+## 常见的开启硬件加速的 CSS属性
+
+`transform`、`opacity`、`SVG filters`、`will-change`
+
+开启硬件加速的坑：
+- 如果你为太多元素使用css3硬件加速，会导致内存占用较大，会有性能问题。
+- 在 `GPU`渲染字体会导致抗锯齿无效。这是因为 `GPU`和 `CPU`的算法不同。因此如果你不在动画结束的时候关闭硬件加速，会产生字体模糊。
+
 ## CSS3动画开启硬件加速
 
 ```css

CSS/CSS-Note-2.md

@@ -184,4 +184,41 @@ body {
   padding-left: constant(safe-area-inset-left);
   padding-left: env(safe-area-inset-left);
 }
-```
+```
+
+## box-shadow技巧
+
+### 单侧投影
+
+如果阴影的模糊半径，与负的扩张半径一致，那么我们将看不到任何阴影，因为生成的阴影将被包含在原来的元素之下，除非给它设定一个方向的偏移量。所以这个时候，我们给定一个方向的偏移值，即可实现单侧投影，例如：
+
+单左侧投影：
+```css
+box-shadow: -7px 0 5px -5px red;
+```
+
+单下测投影：
+```css
+box-shadow: 0 7px 5px -5px red;
+```
+
+### 投影背景 / 背景动画
+
+当 `box-shadow` 的模糊半径和扩张半径都为 `0` 的时候，我们也可以得到一个和元素大小一样的阴影，只不过被元素本身遮挡住了，我们尝试将其偏移出来：
+
+```css
+width: 80px;
+height: 80px;
+border: 1px solid #333;
+box-sizing: border-box;
+box-shadow: 80px 80px 0 0 #000;
+```
+
+`box-shadow` 是可以设置多层的，也就是多层阴影，而且可以进行过渡变换动画（补间动画）。但是 `background-image: linear-gradient()`，也就是渐变背景是不能进行补间动画的，例如 [box-shadow实现背景动画](https://codepen.io/Chokcoco/pen/WaBYZL)
+
+### 立体投影
+
+- 立体投影的关键点在于利于伪元素生成一个大小与父元素相近的元素，然后对其进行 rotate 以及定位到合适位置，再赋于阴影操作
+- 颜色的运用也很重要，阴影的颜色通常比本身颜色要更深，这里使用 `hsl` 表示颜色更容易操作，`l` 控制颜色的明暗度
+
+示例：[立体投影](https://codepen.io/Chokcoco/pen/LgdRKE?editors=1100)

React/React16.x相关.md

@@ -206,9 +206,7 @@ export default class ForwardRefApi extends React.Component {
 - 不期望的副作用
 - 老式(v16.x之前)的 `Context API`
 
-## v16.6 相关更新
-
-### lazy
+## lazy
 
 异步操作，例如异步加载组件，异步获取数据
 ```js
@@ -224,7 +222,7 @@ function MyComponent() {
 }
 ```
 
-### React.memo
+## React.memo
 
 用于给无状态组件实现类似 `PureComponent`的浅比较功能，即浅比较 `props`是否有变化，如果没有变化，就不重新渲染当前组件
 
@@ -234,14 +232,56 @@ const MyComponent = React.memo(function MyComponent(props) {
 })
 ```
 
-### static contextType
+## static contextType
 
 `Context API`的一种渐进方式，功能相同，可以不用关心，一般直接使用 `Context API`即可
 
-### static getDerivedStateFromError()
+## static getDerivedStateFromError()
 
 在发布 `Error Boundaries`的时候，`React`提供了一个新的生命周期方法 `componentDidCatch`，在捕获到错误的时候会触发，你可以在里面修改 `state`以显示错误提醒的 `UI`，或者将错误信息发送给服务端进行 `log`用于后期分析。但是这里有个问题，就是在捕获到错误的瞬间，`React`会在这次渲染周期中将这个组件渲染为 `null`，这就有可能导致他的父组件设置他上面的`ref`获得 `null`而导致一些问题，所以现在提供了这个方法。
 这个方法跟 `getDerivedStateFromProps`类似，唯一的区别是他只有在出现错误的时候才触发，他相对于 `componentDidCatch`的优势是在当前的渲染周期中就可以修改 `state`，以在当前渲染就可以出现错误的 `UI`，而不需要一个 `null`的中间态。
 而这个方法的出现，也意味着以后出现错误的时候，修改 `state`应该放在这里去做，而后续收集错误信息之类的放到 `componentDidCatch`里面
 
 
+## Hooks
+
+### useState
+
+作用：
+
+- 方便组件的复用
+- 摒弃 `class`，摒弃 `this`， 让组件易于写成 `function`的形式，
+
+```js
+import { useState } from 'react'
+
+function Example() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  )
+}
+```
+
+`Tips`：
+
+- 数组的结构赋值开销较大，可以考虑写成对象结构或直接赋值
+
+```js
+const [count, setCount] = useState(0)
+// 改成
+const _useState = useState(0)
+let count = _useState[0]
+let setCount = _useState[1]
+```
+- `useState`可以多次调用，用于构造多个 `state`，接收的值不仅限于原始类型(`string/number/boolean`)，同样包括对象和数组，需要注意的是，之前我们的 `this.setState`做的是合并状态后返回一个新状态，而 `useState`是直接替换老状态后返回新状态，最后，`react`也给我们提供了一个 [useReducer](https://react.docschina.org/docs/hooks-reference.html#usereducer) 的 `hook`，如果你更喜欢 `redux`式的状态管理方案的话
+
+- `react`是怎么保证这组件内多个 `useState`找到它对应的 `state`呢
+
+`react`是根据 `useState`出现的顺序来定的，所以 `react`规定我们必须把 `hooks`写在函数的最外层，不能写在 `if...else`等条件语句当中，来确保 `hooks`的执行顺序一致

React/somecase.md

@@ -100,3 +100,39 @@ ReactDOM.render((
   document.getElementById('app')
 );
 ```
+
+## [Render Props](https://react.docschina.org/docs/render-props.html)
+
+>指一种在 `React` 组件之间使用一个值为函数的 `prop` 在 `React` 组件间共享代码的简单技术，主要用于简化 `react`
+组件的复用方式
+
+```jsx
+class DataProvider extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { target: 'Zac' };
+  }
+
+  render() {
+    return (
+      <div>
+        {this.props.render(this.state)}
+      </div>
+    )
+  }
+}
+
+// 使用 render Props
+<DataProvider render={data => (
+  <Cat target={data.target} />
+)} />
+```
+虽然这个模式叫 `Render Props`，但不是说非用一个叫 `render`的 `props`不可，习惯上大家更常写成下面这种：
+```jsx
+<DataProvider>
+  {data => (
+    <Cat target={data.target} />
+  )}
+</DataProvider>
+```
+

实用代码段/代码段(3).md

@@ -209,6 +209,10 @@ console.log(img.width, img.height)
 `HTML5` 提供了一个新属性`naturalWidth/naturalHeight`可以直接获取图片的原始宽高：
 ```js
 const img = document.querySelector('imgEle')
-console.log(img.naturalWidth, img.naturalHeight)
+img.src = 'https://pic5.zhuanstatic.com/zhuanzh/n_v20a70b48b1e2b4858963e014f42c6e226.png'
+img.onload = () => {
+  console.log(img.naturalWidth, img.naturalHeight)
+}
 ```
-`naturalWidth/naturalHeight`的兼容性很好，`IE8+`即可，完全可以用于实际生产环境
+`naturalWidth/naturalHeight`的兼容性很好，`IE8+`即可，完全可以用于实际生产环境
+

常用技巧/前端技巧(2).md

@@ -289,4 +289,54 @@ const uncodeUtf16 = (str) => {
   })
   return result
 }
+```
+
+## 数字取整
+
+对一个数字 `num | 0`可以取整，负数也同样适用
+```js
+1.3 | 0         // 1
+1.9 | 0         // 1
+-1.9 | 0        // -1
+```
+
+## 惰性载入函数
+
+在某个场景下我们的函数中有判断语句，这个判断依据在整个项目运行期间一般不会变化，所以判断分支在整个项目运行期间只会运行某个特定分支，那么就可以考虑惰性载入函数
+
+```js
+function foo() {
+  if (a !== b) {
+    console.log('aaa')
+  } else {
+    console.log('bbb')
+  }
+}
+// 优化后
+function foo() {
+  if (a != b) {
+    // 重新赋值，下次就无需进行判断了
+    foo = function(){
+      console.log('aaa')
+    }
+  } else {
+    // 重新赋值，下次就无需进行判断了
+    foo = function() {
+      console.log('bbb')
+    }
+  }
+  return foo()
+}
+```
+
+## 数组平铺
+
+```js
+const flatten = (arr, depth = 1) =>
+  depth != 1
+    ? arr.reduce((a, v) => a.concat(Array.isArray(v) ? flatten(v, depth - 1) : v), [])
+    : arr.reduce((a, v) => a.concat(v), []);
+// 使用
+flatten([1, [2], 3, 4]);                             // [1, 2, 3, 4]
+flatten([1, [2, [3, [4, 5], 6], 7], 8], 2);           // [1, 2, 3, [4, 5], 6, 7, 8]
 ```