hook函数

useState函数

hook特性是react16.8版本之后才有的新特性
useState 就是一个hook函数这个函数可以让函数组件拥有state(状态)
useState(初始值) 返回的是长度为2的数组
第一项的初始值
第二项是修改该变量的函数

注：初始值只有在第一次执行函数是才有效之后的每次执行都无效

const {useState} = React

   function Heaven() {
       const [count,setCount] = useState(2)
       console.log('执行',count)
       return (
           <div>
               <p>你已经点击了{count}次</p>
               <button onClick={()=>setCount(count+1)}>点击增加</button>
           </div>
       )
   }

   let showFruit = true;
   function Heaven1() {
       const [count,setCount] = useState(2)
       var [fruit,setFruit] = useState('banana')
       showFruit = false
       const [name,setName] = useState('heaven')
       return (
           <div>
               <p>{count}--{fruit}--{name}</p>
               <button onClick={()=>setCount(count+1)}>点击增加</button>
           </div>
       )
   }

   ReactDOM.render(<Heaven1/>,document.getElementById('box'))

useRef(参数)

生成标记对象 {current:标识}

const {useRef} = React
  function Heaven(){
      const usernameRef = useRef('username');
      const psdRef = useRef('psd');
      const handleClick = ()=>{
          //得到用户名和密码
          console.log(usernameRef.current.value)
          console.log(psdRef.current.value)
      }
      return (
          <div>
              <h3>非受控表单</h3>
              用户名： <input type="text" ref={usernameRef}/><br/>
              密码：<input type="password" ref={psdRef}/><br/>
              <button onClick={handleClick}>点击发送数据</button>
          </div>
      )
  }


  ReactDOM.render(<Heaven/>,document.getElementById('box'))

useEffect

useEffect（回调函数）
用来模拟 es6类组件的生命周期函数模拟了componentDidMount和componentDidUpdate和componentWillUnmount
回调函数是当页面渲染render之后就执行回调函数是当页面渲染render之后就执行

回调函数一般是写副作用代码

副作用指的是
1.请求数据

2.修改原生dom

const {useEffect,useState} = React
  function Heaven(){

      let [count,setCount] = useState(0)
      useEffect(()=>{
          document.title = `你已经点击了${count}次`
	
	return function(){
		//这个函数是第二次才会执行的；第一次熏染不会执行；相当于模拟了componentWillUnmount；
		//执行时间早于useEffect的回调函数的；
	}
      },[])
//useEffect的第二个参数是相当于vue中的watch，
//设置某个属性用于观察，一旦属性发生变化，就会触发这个生命周期函数,[]表示怎样多要触发;
//观察第二次的useEffect是否可以执行；

      return (
          <div>
            <button onClick={()=>setCount(count+1)}>点击</button>
          </div>
      )
  }


  ReactDOM.render(<Heaven/>,document.getElementById('box'))

扩展自定义组件

const useRandomColor = (initColor)=>{
       const [color,setColor] = useState(initColor)

       const handleRandom = ()=>{
           const randomColor = '#'+Math.random().toString(16).slice(2,8)
           setColor(randomColor)
       }
       return [color,handleRandom]
   }

   function Heaven1(){
       const [color,handleRandom] = useRandomColor('red')
       return (
           <div style={{backgroundColor:color,padding:50,textAlign:'center'}}>
               <button onClick={handleRandom}>点击切换颜色</button>
           </div>
       )
   }

   function Heaven2(){
       const [color,handleRandom] = useRandomColor('green')
       const handleClick = ()=>{
           setInterval(handleRandom,1000)
       }
       return (
           <div style={{backgroundColor:color,padding:50,textAlign:'center'}}>
               <button onClick={handleClick}>点击切换颜色</button>
           </div>
       )
   }

   ReactDOM.render(
       <div>
           <Heaven1/>
           <Heaven2/>
       </div>,document.getElementById('box'))

useReducer （仓库）

useReducer和redux有很多相似的地方；

构成仓库的必要条件

初始的数据

reducer

const {useEffect,useState,useReducer} = React

  const number = 3;//仓库的初始的数据
  const reducer = (state,action)=>{//初始的reducer仓库；
      console.log(state, action)
      switch(action.type){
          case 'add':
              return state+action.data;
          case 'minus':
              return state-action.data;
      }
  }

  function Heaven(){
//第一个是仓库，第二的是数据，接受的时候第一个是数据，第二个数方法；
//dispatch只能在当前组件使用；
      const [state,dispatch] = useReducer(reducer, number)
      const handleAdd = ()=>{
          dispatch({type:'add',data:1})
      }
      return (
          <div>
              <p>count:{state}</p>
              <button onClick={handleAdd}>+</button>
              <button onClick={()=>dispatch({type:'minus',data:2})}>-</button>
          </div>
      )
  }


  ReactDOM.render(<Heaven/>,document.getElementById('box'))

createContext （创建上下文）

可以是祖孙组件方便传值；

const {useContext,useState,createContext} = React

 const Context = createContext()
 console.log(Context)

 function Heaven(){
     const [number,setNumber] = useState(2)

     return (
         <Context.Provider value={{number,age:28}}>
             <Son1 />
             <Son2 />
         </Context.Provider>
     )
 }

 function Son1(props){
     const {number,age} = useContext(Context)
     return (
         <div>
             组件1---{number}
             <GrandSon1/>
         </div>
     )
 }

 function GrandSon1(props){
     const {number,age} = useContext(Context)
     console.log(useContext(Context))
     return (
         <div>
             孙子组件1---{number}
         </div>
     )
 }

 function Son2(props){
     const {number,age} = useContext(Context)
     return (
         <div>
             组件2---{number}
         </div>
     )
 }


 ReactDOM.render(<Heaven/>,document.getElementById('box'))

也可以方便兄弟传值(如下代码)

const {useContext,useState,createContext} = React

  const Context = createContext()
  function Heaven(){
      const [number,setNumber] = useState(2)
      return (
          <Context.Provider value={{number,setNumber}}>
              <Son1 />
              <Son2 />
          </Context.Provider>
      )
  }
  function Son1(){
      const {number,setNumber} = useContext(Context)
      return (
          <div>
              <button onClick={()=>setNumber(number+1)}>增加</button>
              <button onClick={()=>setNumber(number-1)}>减少</button>
          </div>
      )
  }
  function Son2(){
      const {number} = useContext(Context)
      return (
          <div>
              组件2--{number}
          </div>
      )
  }


  ReactDOM.render(<Heaven/>,document.getElementById('box'))