React Hooks中的useState、useEffect、useMemo的使用

1、useState:获取需要的state和更新state的方法

     const  [state,setState]=useState(initialState)

    参数：initalState:当前state的初始值，也可以是一个函数（参数只会在组件的初始渲染中起作用）

 返回值：返回值是一个数组，[当前state的值，更新state的方法]

例：

function Example() {
  const [count, setCount] = useState(0);  // 声明一个叫 "count" 的 state 变量，0为count的初始值

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

2、useEffect:每次渲染之后执行

useEffect(didUpdate)

参数：function,每次渲染之后执行，在此function可执行更新dom或添加订阅等操作

返回值：function,可以不返回任务内容，如果didUpdate中返回了一个function,这个function会在组件卸载前执行，

              因此需要清除上次订阅的内容可以在这个function里写

执行条件：useEffect的第二个参数是一个数组，只有当数组中的值发生变化才会执行，如果执行在第一次挂载或卸载时只传[]

例：

export function getStatus(id){

    const searchingStatus=async()=>{} //根据id查询状态

    const stopSearchStatus=async()=>{}//取消查询

    useEffect(()=>{

              searchingStatus();

               return stopSearchStatus;

    },[id]);

   return (<div></div>)

}

3、useMemo:减少不必要的渲染

   function Example({exam1,exam2}){

            const comp1=useMemo(()=><Comp1 exam1={exam1} />,[exam1]);

            const comp2=useMemo(()=><Comp2 exam2={exam2} />,[exam2]);                

          //只有在第二个参数数组中的值发生变化时，才会重新渲染

     return (

        <>

    {comp2}

    {comp1}

   </>      

  )

}