react hooks详解

迷南。 2023-05-21 08:55 10阅读 0赞

### react hooks详解 ###

*  useState
 *  useEffect
 *  useContext
 *  useRef
 *  useReducer
 *  useMemo
 *  useCallback

# useState #

import React, {  useState } from "react";
    
    export default function  Button()  { 
      const  [buttonText, setButtonText] =  useState("Click me, please");
    
      function handleClick()  { 
        return setButtonText("Thanks, been clicked!");
      }
    
      return  <button  onClick={ handleClick}>{ buttonText}</button>;
    }
    // 第一个参数为变量 第二个为设置变量的方法 useState('默认值') 默认只可以使js 中所有的变量类型

# useEffect #

> useEffect()接受两个参数。第一个参数是一个函数，异步操作的代码放在里面。第二个参数是一个数组，用于给出 Effect 的依赖项，只要这个数组发生变化，useEffect()就会执行。第二个参数可以省略，这时每次组件渲染时，就会执行useEffect(),第二个参数为空数组时只在第一次渲染时调用

# useContext #

> 如果需要在组件之间共享状态，可以使用useContext()。  
> 现在有两个组件 Navbar 和 Messages，我们希望它们之间共享状态。

import React, {  useContext } from "react";
    
    const AppContext = React.createContext({ });
    
    const Navbar = () => { 
      const {  username } = useContext(AppContext);
      return (
        <div className="navbar">
          <p>AwesomeSite</p>
          <p>{ username}</p>
        </div>
      );
    }
    const Messages = () => { 
      const {  username } = useContext(AppContext)
    
      return (
        <div className="messages">
          <h1>Messages</h1>
          <p>1 message for { username}</p>
          <p className="message">useContext is awesome!</p>
        </div>
      )
    }
    const APP = () => { 
    	return (
    	<AppContext.Provider value={ { 
    	 username: 'superawesome'
    	}}>
    	  <div className="App">
    	    <Navbar/>
    	    <Messages/>
    	  </div>
    	</AppContext.Provider>
    )
    
    }

# useRef #

> useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。

const SendBox = props => {
      const msgRef = useRef()
      const msgInput = msgRef.current
      return (
        <div
          className={s(['sendbox-wrapper'])}
        >
          <textarea
            disabled={isSending || allMute}
            ref={msgRef}
            placeholder={allMute ? '禁言中' : '说点什么呢'}
            className={s('edit-area')}
            onKeyDown={e => handlerInput(e)}
          ></textarea>
          </div>
        </div>
      )
    }

# useReducer #

> React 本身不提供状态管理功能，通常需要使用外部库。这方面最常用的库是 Redux。  
> Redux 的核心概念是，组件发出 action 与状态管理器通信。状态管理器收到 action 以后，使用 Reducer 函数算出新的状态，Reducer 函数的形式是(state, action) => newState。

const [state, dispatch] = useReducer(reducer, initialState);
    	const myReducer = (state, action) => {
    	  switch(action.type)  {
    	    case('countUp'):
    	      return  {
    	        ...state,
    	        count: state.count + 1
    	      }
    	    default:
    	      return  state;
    	  }
    	}
    	function App() {
      	  const [state, dispatch] = useReducer(myReducer, { count:   0 });
    	  return  (
    	    <div className="App">
    	      <button onClick={() => dispatch({ type: 'countUp' })}>
    	        +1
    	      </button>
    	      <p>Count: {state.count}</p>
    	    </div>
    	  );
    	}

# useMemo #

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

> 把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。  
> 记住，传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作，诸如副作用这类的操作属于 useEffect 的适用范畴，而不是 useMemo。  
> 如果没有提供依赖项数组，useMemo 在每次渲染时都会计算新的值。  
> 你可以把 useMemo 作为性能优化的手段，但不要把它当成语义上的保证。将来，React 可能会选择“遗忘”以前的一些 memoized 值，并在下次渲染时重新计算它们，比如为离屏组件释放内存。先编写在没有 useMemo 的情况下也可以执行的代码 —— 之后再在你的代码中添加 useMemo，以达到优化性能的目的。

# useCallback #

const memoizedCallback = useCallback(
      () => { 
        doSomething(a, b);
      },
      [a, b],
    );

> 返回一个 memoized 回调函数。  
> 把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新。当你把回调函数传递给经过优化的并使用引用相等性去避免非必要渲染  
> （例如 shouldComponentUpdate）的子组件时，它将非常有用。  
> useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。