react-hooks

2021/9/8 6:08:07

编程Tag： react 组件函数 hooks return const state count

本文主要是介绍react-hooks，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Hook的使用规则

只能在函数的最外层去使用，不要在循环中或者子函数中去调用

只能在react的函数组件中去调用，也可以在自定义的hooks中去调用

useState

useState 其实就是个状态逻辑函数，通过数组的解构方式去获取一个值和对应这个值的操作方法

const [xxx,setXxx] = useState('defaultValue')

并且第二个参数是个赋值函数，也可以去调用自定义函数去运行

相对于class组件中的优点

在状态管理中颗粒度更细
代码相对与class而言也比较清晰
容易做状态分类
采用平铺的写法

Props.children也可以采用这样的写法

const Parent = props => {

  const [count, setCount] = useState(0);

  return props.children(count, setCount);

};


const TestPage = () => {

  return (

      <Parent>

        {(count, setCount) => {

          return (

            <button onClick={() => {

                setCount(count + 1);

              }}

            >

              clickNum {count}

            </button>

          );

        }}

      </Parent>

  );

};

useEffect

useEffect 就是指明react在对dom进行更改后，需要运行的函数

因为hooks属于无状态的组件，所以也没有class组件生命周期一说

也可用于做优化页面性能
可以使用useEffect去模拟class的生命周期（简单理解来说）

useEffect第二个参数是所依赖的值（props传入的值），数组形式，可以写多个

它会判断props的传值和他的上次进行一次浅比较，如果发现有变化，才回去执行，无变化，则不执行。

useEffect(()=>{ 
 console.log('do something') 
},['depValue'])

模拟类的didMount

useEffect(()=>{ console.log('do something') },[])

如需清除副作用，可以直接在回调函数中return出一个处理函数

useEffect(()=>{ 
 console.log('do something') 
  return ()=>{
   console.log('clear effect')
 }
})

副作用：指当前hooks在函数作用域以外所处理的事情

UseContext

无需使用组件嵌套的形式，就可以订阅react的上下文

换而言之传统组建通信，数据流基本都是props向下派发的，但是context 可以直接无视子组件嵌套层级与底层的子组件直接通信

典型例子就是redux 就是使用react提供的context的技术做的数据管理

使用UseContext的例子

const ctx = React.createContext();
const myContext = useContext(ctx);

const SubComponent = ()=>{
   const {count,setCount} = useContext(myContext);

   return <button
             onClick={()=>{
              setCount(coun+1)
               }}
              >
          {count}
        </button>
}

const App = ()=>{
  const [count,setCount] = useState(0);
  return <ctx.provider
            value={{
              count,
               setCount,
            }}
            >
       <div>
        <div>
          <subComponent />
        </div>
      </div>
     </ctx.provider>
}

useReducer

useReducer 自定义state 和redux类似

useReducer 返回一个state和dispatch方法，后者用于修改前者的值

useReducer 参数描述

第一个参数是处理函数用于disptach后区分操作类型

第二个参数用于当前state的默认值 init初始值（initialArg）

第三个参数作用与当前的state，相当于init （initialArg），是一个函数需要将 init 函数作为 useReducer 的第三个参数传入，这样初始 state 将被设置为 init(initialArg)。

示例

const reducer = (state, action) => {
  switch (action.type) {
    case "acc": return { ...state, count: state.count + 1 };
    case "ded": return { ...state, count: state.count - 1 };
    case "save": save(123);
    default: return state;
  }

};

const save = state => state;

const TestPage = () => {

  const [state, dispatch] = useReducer(reducer,

    {

      count: 1,

      data: 

    },

    save

    //这个save方法可以单独抽离出来 进行逻辑判断 搭配useReducer的第三个参数使用，

  );

  return (

      <button onClick={() => {

          dispatch({

            type: "acc"

          });

        }}

      >
        {state.count}

      </button>
  );

};

useMemo

避免在每次渲染时都进行高开销的计算

缓存计算结果的值（写法类型useEffect）

如果props的依赖值没有发生变化函数不会执行, 缓存上次计算的状态

传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作，诸如副作用这类的操作属于useEffect 的适用范畴，而不是 useMemo。

如果没有提供依赖项数组，useMemo 在每次渲染时都会计算新的值。

示例

useMemo(()=>{

 console.log('do something')
 //复杂的逻辑计算

},[value])

useCallBack

useCallBack 缓存函数

第一个参数是回调函数

第二个是更新依赖项，依赖项为空则直接缓存，反之依赖项发生变化执行回调

传入子组件的的函数会被重新声明使用useCallBack进行缓存

useMemo和useCallback的区别

useMemo 计算结果是 return 回来的值, 主要用于缓存计算结果的值，应用场景如：需要计算的状态

useCallback 计算结果是函数, 主要用于缓存函数，应用场景如: 需要缓存的函数，因为函数式组件每次任何一个 state 的变化整个组件都会被重新刷新，一些函数是没有必要被重新刷新的，此时就应该缓存起来，提高性能，和减少资源浪费。

useRef

useRef会返回一个可变的ref对象直接插入使用 ref.current值为当前dom

useImperativeHandle

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

function FancyInput(props, ref) {

  const inputRef = useRef();

  useImperativeHandle(ref, () => ({

    focus: () => {

      inputRef.current.focus();

    }

  }));

  return <input ref={inputRef} ... />;

}

FancyInput = forwardRef(FancyInput);

React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中

useLayoutEffect

useLayoutEffect的执行时机是浏览器把内容真正渲染到界面之前和 componentDidMount 等价。相比于useEffect不会有闪烁的问题；

为什么会有闪烁的问题·

useEffect是dom渲染完毕后去异步执行的，如果在这个过程中在触发重新渲染，就会导致原本渲染的内容再被渲染一次，从而出现闪烁的现场。而useLayoutEffect相当于渲染之前同步进行的，等它这次操作执行完毕后在进行渲染，所以不会闪烁。

useDebugValue

useDebugValue 打印日志到react-dev-tools 第二个参数为可选为一个格式化参数，接受debug的值作为参数，并且返回一个格式化的值

这篇关于react-hooks的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！