Typescript+React学习笔记（二）- hook相关内容

1.npx的作用

• 避免安装全局模块
• 可直接调用项目内部安装的模块

比如模块mocha，如果用npm install mocha仅安装在局部的话，在命令行中输入 mocha --version 会显示找不到命令的（当然，也可以先在命令行中，手动指定目录来找到，如 node_modules/.bin/mocha --version），这时可以用 npx mocha --version 在全局使用该命令

2.函数组件的类型描述

import React from 'react';
interface ITestProps { message: string; };
const Test: React.FunctionComponent<ITestProps> = (props) => { return ... }

注意：React.FunctionComponent 另一个写法为 React.FC

3.函数组件的渲染

函数组件是没有生命周期的，当函数执行完就会去渲染组件，当下次再执行函数的时候，会先把上一次组件的卸载(相当于执行上次组件的componentWillUnmount)，然后再重新渲染(相当于执行componentDidMounted或componentDidUpdated)

4.useEffect(callback, array)的参数

• callback，相当于componentDidMounted或componentDidUpdated
• callback中可以返回一个函数，相当于componentWillUnmount
• array是一个数组，可传入useState定义的多个变量，当某个变量的值发生变化时才会执行回调，相当于执行componentDidUpdated(类似纯组件，也只是对该变量做浅层对比)

const [test, setTest] = useState([1,2,3]);
const [test2, setTest2] = useState(4);

useEffect(callback, [test, test2]);

注意：
array若不传，则每次都会执行callback，相当于shouldComponentUpdate返回true
array若只传空数组[]，相当于只会执行componentDidMounted和componentWillUnmount

5.自定义hook

• 自定义hook必须以use开头来定义函数名
• 自定义hook在被复用的时候，state和effect都是相互隔离的

6.useRef

const ref = useRef(初始值)				//赋初始值
ref.current								//如何获取
<input ref={ref} type="text" />			//用于存放dom
ref.current ++							//用于普通值

注意：ref对象在组件的整个生命周期内保持不变，除非手动去更改，且变更.current 属性不会引发组件重新渲染

7.useContext

context主要用于在不同组件之间传递数据(redux中就利用了在顶级创建的context向全局传递共享的数据)

//父组件：
export const MyContext = React.createContext(initValue);
<MyContext.Provider value={value}>
	...
	<subA />
</MyContext.Provider>

//子组件：
import React, { useContext } from 'react';
import { MyContext } from '...';
const value = useContext(MyContext);

8.hook的注意事项

• 确保只在函数组件内部的顶层使用hook
• 只在React函数和自定义hook才可使用hook

9.hook集合地址

https://usehooks.com