创建state和setState

   名为自定义名，格式为此
   const [name,setName]= useState([1,2,3,4,5])
   const [input,setinput]=useState('123')


调用
name.map((item,index)=>(
            <li key={item}>
              {item}
            </li>))
修改
   setinput('')

函数组建中没有生命周期

useEffect (()=>{ return(()=>{})},[])（以下为将首字母变成大写）

1.一个函数组件中可有多个useEffect

2.数组中不传值为仅执行一次 传值为当input发生改变时会再次执行（以input为例）

3.return为可选用于组件销毁时执行

useEffect(()=>{
     setinput(
       input.slice(0,1).toUpperCase()+input.slice(1)
     )
     var timer=setInterval(() => {
            console.log(1);
        }, 1000);
     return (()=>{
            clearInterval(timer)
            console.log('组件销毁');
        }) 
   },[input])

useCallback   记忆函数(性能优化) 只执行函数无返回值

当 name的值发生改变时重新创建name（获取新的值），若未改变则使用之前缓存的name值

var mycount=useCallback(
    ()=>{
    },[name]  [ ] 中可改变
  )

useMemo  记忆函数(性能优化）有返回值

const   str=useMemo(()=>{ return },[])  一定有return
const getdata=useMemo(()=>{
    return list.filter(item=>str===item.name.toUpperCase().substr(0,str.length).toUpperCase()||item.address.toUpperCase().includes(str.toUpperCase()))
  },[list,str])

当list，str改变时重新缓存  list，str的值

useRef  与类中的ref用法相同（创建方式不同）

可存储变量的值

       const myref=useRef()
      <input ref={myref}></input>
      <button onClick={getdata}>add</button>
       console.log(myref.current.value);   

    var  count= useRef(0)

useContext 简化跨级通信

const creatContext=React.createContext()

父组件
function App() {
  return (
    <creatContext.Provider value='123'>   
        <div>
          <Child1></Child1>
        </div>
    </creatContext.Provider>

  )
}
孙组件
function Child2(){
  const getcontext=useContext(creatContext)     可创建变量用来接受Provider传来的value值
  return(
    <div>
      {getcontext}
    </div>
  )
}

useReducer  定义与更改全局状态

定义一个全局的对象和函数对象 
const list={
  count:1，
  list:[]
}

const obj=(prevstate,val)=>{
    const a={...prevstate}    深复制对象  避免直接修改全局对象的值
    switch(val.type){
    case '+': a.count++
              return str      将str返回   此时count=2 其他属性不变
   default: return 0
}
}
组件中 创建useReducer 
  const [state,obj2]= useReducer(obj,list)
使用数据
{state.count}
<button onClick={()=>{
obj2({
type:'+'     传一个值来进行判断
})
}}>+</button>

useReducer 可与useContext 结合使用来完成复杂通信

const createprovider=React.createContext()
const allstate={
  add:'请单击',
}
const fn=(prevstate,action)=>{
    const str={...prevstate}
    switch(action.value){
      case 'A': str.add=action.value
      return str
      case 'B': str.add=action.value
      return str
      default: return str
    }
}
根组件
  const [state,setstate]=useReducer(fn,allstate)
  return (     
        <createprovider.Provider value={{state:state,setstate:setstate}}>
                    内容
        </createprovider.Provider>
     )
子/孙组件中
  const {state,setstate}=useContext(createprovider)
显示与调用
 return
  (<div style={{backgroundColor:'red'}}>
    {state.add}
    <button onClick={()=>{setstate({value:'A'})}}>改变a</button>
    <button onClick={()=>{setstate({value:'B'})}}>改变b</button>
  </div>)

自定义hooks

创建
function useFilter(){   Filter为自定义名
   内容
    return  {       必须有返回值
          newlist
}    

}    

组建中使用
  const {newlist}=useFilter()   用解构赋值的方法获得newlist