react - 常用的hook API
1、usestate
1）作用
定义一个state和一个更新state的函数（setState）；
官网：https://react.docschina.org/docs/hooks-reference.html#usestate
2）用法
const [state, setState] = useState(initialState);
initialState：
state初始值，只有在组件初始渲染起作用；
可选，非必填，不填时state默认值为undefined；
类型多样，布尔Boolean、对象Object、数组Array、数字Number、空值NUll、字符串String、未定义Undefined、函数Function等；
setState：
更新state的函数，接收一个新的 state 值并将组件的一次重新渲染加入队列。
setState(newState);
3）备注
state为对象时，setState需得进行深拷贝；方法如下：
方案一：
const newState = JSON.parse(JSON.String(state))；
newState.params1 = XXXX;
newState.params2 = YYYY;
newState.params3 = ZZZZ;
setState(newState)
方案二：
state.params1 = XXXX;
state.params2 = YYYY;
state.params3 = ZZZZ;
setState(JSON.parse(JSON.String(state)))
2、useEffect
1）作用
可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合，实际不是；
默认情况下，是在每轮渲染结束后执行；
使用场景：
数据请求：useEffect(fn, [])；模拟生命周期componentDidMount
监听某个props或state更新：useEffect(fn, [state])；模拟生命周期componentDidUpdate 和 componentWillUnmount
官网：https://react.docschina.org/docs/hooks-reference.html#useeffect
2）用法
useEffect(fn, deps);
fn: 处理函数；
deps：依赖项数组；
不传: 组件的每次更新时，effect都会被重新创建订阅；
空数组[]: 只在执行一次effect，且是在组件挂载和卸载时执行；
数组[val1, val2, val3...]: 可以有单个，也可以有多个值；可以是props的值，也可以是state，同时也只能是props或state；且是在val发生更新后执行；
useEffect(() => {
// 处理数据
if (value) {
doSometings(Array);
}
}, [Array])
3、useRef
1）作用
react访问DOM的方式；
每次渲染时返回同一个可变的 ref 对象；
官网：https://react.docschina.org/docs/hooks-reference.html#useref
2）用法
const refContainer = useRef(initialValue);
initialValue: 初始值，一般为空、{}、null或undefined，具体根据情况而定；
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` 指向已挂载到 DOM 上的文本输入元素
inputEl.current.focus();
};
return (
<div>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</div>
);
}
4、useImperativeHandle
1）作用
将在使用 ref 时自定义暴露给父组件的实例值；
与 forwardRef 一起使用；
官网：https://react.docschina.org/docs/hooks-reference.html#useimperativehandle
2）用法
useImperativeHandle(ref, createHandle, [deps])；
createHandle: 暴露给父组件的实例值
// 子组件
function FancyInput(props, preProps) {
const inputRef = useRef();
useImperativeHandle(preProps, () => ({
focus: () => {
inputRef.current.focus();
},
getVal: () => {
return inputRef.current.getValue();
} })); return <input ref={inputRef} ... />; } FancyInput = forwardRef(FancyInput);
// 父组件
function ParentCom(props){
const childRef = useRef(null);
const [state, setState] = useState();
useEffect(() => {
childRef.curret.getVal();
childRef.current.focus();
}, [state])
return (
<div>
<FancyInput ref={childRef} />
</div>
);
}
5、useCallback
1）作用
react性能优化，避免非必要渲染
官网：https://react.docschina.org/docs/hooks-reference.html#usecallback
2）用法
const memoizedValue = useCallback(fn, deps); 相当于 useMemo(() => fn, deps)。
fn: 处理函数；
deps：依赖项数组；
该回调函数仅在某个依赖项改变时才会更新；
// 参数函数
const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);
// 组件
<Component memoizedCallback={memoizedCallback} />
6、useMemo
1）作用
react性能优化，避免非必要渲染；
官网：https://react.docschina.org/docs/hooks-reference.html#usememo
2）用法
const memoizedValue = useMemo(() => fn, deps);
fn: 处理函数
deps: 依赖项数组
3）与useCallback区别
useCallback：使用在父组件中
useMemo: 使用在子组件中
