React基础之自定义hook函数

自定义Hook是以use打头的函数，通过自定义Hook函数可以来实现逻辑的封装与复用

封装自定义hook的通用思路

1.声明一个以use大头的函数

2.在函数体内封装可复用的逻辑

3.把组件中用到的状态或者是状态以对象或是数组的形式return出去

4.在需要使用组件的地方，执行这个函数，结构出需要使用的状态和回调进行使用

import React, { useState } from 'react';

import { useEffect } from 'react';

function useToggle(){

  const [value,setValue]=useState(true)

  const toggle=()=>{

    setValue(!value)

  }

  //那些状态和回调函数需要在其他组件中使用 return

  return{

    value,

    toggle

  }

}

function App() {

 const {value,toggle} =useToggle()

  return (

    <div>

      {value&& <div>this is div</div>}

      <button onClick={toggle}>toggle</button>

    </div>

  );

}

export default App;

ReactHooks使用规则

1.只能在组件中或其他自定义hook函数中调用

2.只能在组件的顶层调用，不能嵌套在if、for、其他函数中

import React, { useState } from 'react';

useState('')//错误的

function App() {

if(Math.random()>0.5){

  useState('')//错误的

}

  return (

    <div>

   

    </div>

  );

}

export default App;