React Hooks备忘录

2021-12-10

一、useState

1.声明、读取：

import React, { useState } from 'react';
function Example(){
    const [ name , setName ] = useState('wcg');
    return (
            <p>我叫{name},是一名前端工程师</p>
    )
}
export default Example;

2.使用(修改):

1	<button onClick={()=>{setName('wuchenguang')}}>click me</button>

二、useEffect

调用及解绑副作用：

useEffect(()=>{
        console.log('渲染了');
        return ()=>{
            console.log('解绑了');
        }
    },[])

三、useContext跨组件层级传值

1.新建文件ValueContext.js

import React from 'react';
//创建context
const ValueContext = React.createContext({});

export default ValueContext;

2.父组件中导入ValueContext

1	import ValueContext from './ValueContext';

3.父组件中使用ValueContext包裹子组件,传递变量或者函数

<ValueContext.Provider
    value={{
        data: searchData,
        changeData: changeSearchData,
    }}
>
	<Child />
</ValueContext.Provider>

4.子组件导入ValueContext并使用

1	const { data, changeData } = useContext(ValueContext);

四、useReducer

接收两个参数：

第一个参数为reducer函数

第二个参数是初始值

使用示例：

import React, { useReducer } from 'react';

function ReducerDemo(){
    const [ count , dispatch ] =useReducer((state,action)=>{
        switch(action){
            case 'add':
                return state+1;
            case 'sub':
                return state-1;
            default:
                return state;
        }
    },0)
    return (
       <div>
           <h2>现在的分数是{count}</h2>
           <button onClick={()=>dispatch('add')}>Increment</button>
           <button onClick={()=>dispatch('sub')}>Decrement</button>
       </div>
    )

}

export default ReducerDemo;

在某些场景下，useReducer会比useState更适用：例如state逻辑较复杂且包含多个子值，或者下一个state依赖于之前的state等

五、useContext与useReducer实现类似redux的功能

参考资料

六、useRef

1.useRef获取DOM元素

import React, { useRef} from 'react';
function Example8(){
    const inputEl = useRef(null);
    const onButtonClick=()=>{ 
        inputEl.current.value="Hello ,wcg";
        console.log(inputEl); //输出获取到的DOM节点
    }
    return (
        <>
            {/*保存input的ref到inputEl */}
            <input ref={inputEl} type="text"/>
            <button onClick = {onButtonClick}>在input上展示文字</button>
        </>
    )
}
export default Example8;

2.useRef保存变量

例如声明一个paramsRef：

1	const paramsRef = useRef(null)

使用paramsRef.current可以进行变量的访问和修改

七、useMemo

在函数组件中缓存计算结果，主要用来解决使用React hooks产生的无用渲染的性能问题。

1	const memorizedValue = useMemo(()=> fn(a,b), deps[a,b])

接收两个参数：

第一个参数为回调函数(计算过程fn，必须返回一个结果)

第二个参数是依赖项(数组)，当依赖项中某一项发生变化，结果会重新计算

function ChildComponent({name,children}){
    function changeXiaohong(name){
        console.log('她来了，她来了。小红向我们走来了')
        return name+',小红向我们走来了'
    }

    const actionXiaohong = useMemo(()=>changeXiaohong(name),[name]) 
    return (
        <>
            <div>{actionXiaohong}</div>
            <div>{children}</div>
        </>
    )
}

八、useCallback

在函数组件中缓存计算函数

1	const fnA = useCallback(fnB, [a])

九、useImperativeHandle

可以在使用 ref 时自定义暴露给父组件的实例值

使用示例：

1.子组件中

//向父组件暴露重置表单的方法
    useImperativeHandle(props.onRef, () => {
        return {
            reset: onReset,
        };
    });

2.父组件中

1	const formRef = React.createRef();

1	<ChildCom onRef={formRef} />

1	formRef.current.reset(); //实现调用子组件的onReset方法

参考资料：

react中父组件调用子组件的方法_checkMa的博客-CSDN博客_react父组件调用子组件中的方法

React hook中父组件调用子组件的方法

十、补充

哪些情况下一个组件会重新渲染？

1.组件自身的state变化；

2.父组件传递的props变化；

3.父组件重新渲染了。