react-hook

1.memo  用于优化方法

const Foo=memo((props)=>{
  return <div>{props.person.age}</div>
})

 

2.useState

const [count,setCount]=useState(()=>{

    return PaymentResponse.defaultCount || 0

  })

 

 3.useEffect

 

const App=(props)=>{
  const [count,setCount]=useState(()=>{
    return props.defaultCount || 0
  })
  const [size,setSize]=useState({
    width:document.documentElement.clientWidth,
    height:document.documentElement.clientHeight
  })

  const onResize=()=>{
    setSize({
      width:document.documentElement.clientWidth,
      height:document.documentElement.clientHeight
    })
  }

  
  useEffect(()=>{
    window.addEventListener('resize',onResize,false)
    return ()=>{
      window.removeEventListener('resize',onResize,false)
    }
  },[])
  

  return ( 
    <div>
      <button onClick={()=>{setCount(count+1)}}>Click{count}</button>
    </div>
   );
}
 
export default App;

 

4.UseContext

import React, { useState,useContext,createContext } from 'react';

const CountContext=createContext()

const Counter=()=>{
  const count=useContext(CountContext)
  return(
    <div>
      {count}
    </div>
  )
}

const App=(props)=>{
  const [count,setCount]=useState(0)
  return ( 
    <div>
      <button onClick={()=>setCount(count+1)}>click</button>
      <CountContext.Provider value={count}>
        <Counter />
      </CountContext.Provider>
    </div>
   );
}
 
export default App;

5.useMemo&useCallback

import React, { useState,useMemo,memo,useCallback } from 'react';


const Counter=memo((props)=>{
  console.log('render Counter')
  return(
    <div onClick={()=>props.onClick()}>
      {props.count}
    </div>
  )
})

const App=()=>{
  const [count,setCount]=useState(0)

  const double=useMemo(()=>{
    return count*2
  },[count==3])

  const onClick=useCallback(()=>{
    console.log('onClick')
  },[])

  return ( 
    <div> 
      <button onClick={()=>setCount(count+1)}>click</button>     
      <Counter count={double} onClick={onClick} />
    </div>
   );
}
 
export default App;

6.useRef

import React, {Component, useState,useMemo,memo,useCallback,useRef,PureComponent } from 'react';


class Counter extends Component{
  speak(){
    console.log('now Counter is '+this.props.count)
  }
  render(){
    const {props} =this
    return(
      <h1 onClick={props.onClick}>{props.count}</h1>
    )
  }
}

const App=()=>{
  const [count,setCount]=useState(0)

  const double=useMemo(()=>{
    return count*2
  },[count==3])

  const onClick=useCallback(()=>{
    console.log('onClick')
    console.log(counterRef.current)
    counterRef.current.speak()
  },[])

  const counterRef=useRef()

  return ( 
    <div> 
      <button onClick={()=>setCount(count+1)}>click</button>     
      <Counter ref={counterRef} count={double} onClick={onClick} />
    </div>
   );
}
 
export default App;

6.自定义hook  必须use开头

import React, {Component, useState,useMemo,memo,useCallback,useRef,PureComponent, useEffect } from 'react';

class Counter extends PureComponent{
  
  render(){
    const {props} =this
    return(
      <h1 >{props.count}</h1>
    )
  }
}

const useCount=(defaultCount)=>{
  const [count,setCount]=useState(defaultCount)
  const it=useRef()
  useEffect(()=>{
    it.current=setInterval(()=>{
      setCount(count=>count+1)
    },1000)
  },[])

  useEffect(()=>{
   if(count>=10){
     clearInterval(it.current)
   } 
  })
  return [count,setCount]
}

const App=()=>{
  const [count,setCount]=useCount(0)

  return ( 
    <div> 
      <button onClick={()=>setCount(count+1)}>click</button>     
      <Counter  count={count} />
    </div>
   );
}
 
export default App;

hooks法则

1.hooks要在顶层调用  意思是不能再条件语句 循环语句 中调用

2.尽在函数组件和自定义函数中调用  不能再其他普通函数中调用