feat: up

programmerZbb · Jun 2, 2020 · 86ff9cb · 86ff9cb
2 parents 79ff7f9 + 30369de
commit 86ff9cb
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 2 deletions.
diff --git a/react+ts写一个类ant-desing库.md b/react+ts写一个类ant-desing库.md
@@ -146,6 +146,28 @@ export default Hello
 
 * useState 的数据每次渲染都是新的数据， 不会随着时间改变。比如说 onclick 绑定了一个常量，并不会随着 常量值在后期被设置而变化，会一直绑定的原来的值。每次渲染都是独立的。
 * 因此得到结论，在任意一次渲染中，props 和 state 都是独立的。使用到他们的任何值也是独立的。
+## useRef
+
+* 每次渲染数据都是独立的，怎样让每次的渲染产生联系呢
+* 使用 useRef 更改数据不会每次都更新组件
+
+```tsx
+const likeRef = useRef(0)
+
+// 获取到，永远能获取到最新的数据
+console.log(likeRef.current)
+// 设置也是一样的
+likeRef.current++
+```
+
+* 使用 useRef 能够获取真实的 DOM 节点
+
+```jsx
+<input type="text" ref={inputEle}/>
+// 不是用current来获取的
+// 但是能用 current 来设置
+inputEle.current.focus()
+```
 
 
 
@@ -159,4 +181,6 @@ export default Hello
 
    在接受鼠标事件的时候，传进的 e 的接口
 
-3. 
+3. HTMLInputElement 
+
+   这种的很多
diff --git a/react16.md b/react16.md
@@ -415,6 +415,41 @@ import svg from '.tet.png'
 * 说白了还是为了代码的复用拆分
 * 组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件。
 
+## context 使用
+
+* 之前共享一些数据需要组件一层一层的传递，不是很方便，react提供了 context ，一个组件内的所有子组件都能够共享这些数据
+
+  例如当前认证的用户、主题或首选语言。
+
+  使用：
+
+```jsx
+// 公共部分，创建 context
+const ThemeContext = React.createContext('light')
+
+// 父组件
+<ThemeContext.Provider value="dark">
+   <TestContext></TestContext>
+</ThemeContext.Provider>
+    
+// 子组件
+ // 绑定context
+this.contextType = ThemeContext
+ 
+<div>
+    test
+    <div>{this.context}</div>
+</div>
+```
+
+### 思考
+
+* Context 主要应用场景在于*很多*不同层级的组件需要访问同样一些的数据。请谨慎使用，因为这会使得组件的复用性变差。
+
+* 如果传递的组件太深层，也可以使用子组件在父组件封装好，直接传递组件的方式（子组件的数据直接由父组件获取，中间组件并不需要知道传递了什么值）
+
+  参考：<https://react.docschina.org/docs/context.html>
+
 ## 关于高阶组件（hoc）、mixin、render prop 的思考
 
 * mixin 是 es5 中公共方法的提取，提供了完整的生命周期，和 vue 中的mixin 相似
@@ -516,7 +551,12 @@ export default Home
 
 ```
 
+## 合成事件
 
+* react 事件传递的 event 不是原生事件，是包装的， React 事件系统一部分的 `SyntheticEvent` 包装器。
+* `SyntheticEvent` 实例将被传递给你的事件处理函数，它是浏览器的原生事件的跨浏览器包装器。除==兼容==所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括 `stopPropagation()` 和 `preventDefault()`。
+* 当需要使用浏览器底层事件的时候，只需要使用 `nativeEvent`属性来获取即可。
+* 如果你想异步访问事件属性，需要调用 `event.persist()`，此方法会从池中移除合成事件，允许用户代码保留对事件的引用。
 
 # 6. react 思考
 

diff --git a/typescript.md b/typescript.md
@@ -1017,4 +1017,23 @@ class A<T = {}> {
 
 # 注意
 
-* 所有的类型都是在定义的时候规定的，在赋值的右边是不需要去定义类型的
+* 所有的类型都是在定义的时候规定的，在赋值的右边是不需要去定义类型的
+
+# tsconfig.json 文件
+
+* ts 项目中 `tsconfig.json`文件能配置 ts检查的规则
+
+## 1. null 和 undefined 问题
+
+* null 和 undefined 是所有类型的子类型，本来可以赋值给任何类型的变量，需要配置`strict`为 false
+
+  ```js
+  {
+      "compilerOptions": {
+          "strict": true,
+          //...
+      }
+  }
+  ```
+
+