react-hooks

Posted 2021-04-25 晓组智

 react-hook

简介：Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

学习网站：https://react.docschina.org/docs/getting-started.html

react-hook分为下面几点   

     1. useState

     2. memo

     3. useMemo

     4. useCallback

     5. useReducer

     6. useContext

     7. useRef

     8. useEffect

一、useState

如图：

import React from 'react';import ReactDOM from 'react-dom';// useState的原理// 封装一个useStatelet lastState;//定义一个初始值function useState(initialState/** 传进来的初始值*/){ lastState=lastState||initialState; //如果之前的初始值有值就用之前的，没有就用传进来的 function setState(newState){ //定义设置修改值的方法，把值传给定义的初始值 lastState=newState render()//重新渲染页面

 } return [lastState,setState]//每次调用之后都会调用来修改里面的值 最后会返回一个数组

}



function App(){ let [number,setNumber]=useState(0) //useState的定义 ，左边是通过我们的结构赋值的一个函数，第一个是我们定义的变量名，第二个是改变数据的方法，右边是我们引用的useState括号的里面的值就是我们默认定义的初始值 return ( <> <div>{number}</div> <button onClick={()=>setNumber(number+1)}>增加</button>  </>  )}





function render(){ ReactDOM.render(  <App /> , document.getElementById('root'));}render()

二、memo、useMemo和useCallback

介绍：主要作用用于缓存和监听下数据，数据改变就改变，没有发生改变的就不让他重渲染了

import React,{memo} from 'react';import ReactDOM from 'react-dom';







function Child({data,addClick}){ // console.log(data,addClick) console.log("child render") // 调用传递过来的方法和值 return <button onClick={addClick}>{data.number}</button>

}Child=memo(Child)//这个一步不写就没有监听了下面就会报错/** * 把函数组件传给memo方法，返回一个新的组件， 改造后每次渲染前都会判断一个属性变了没有， 如果属性不变就不渲染，变了才渲染 */

function App(){ let [number,setNumber]=useState(0); let [name,SetName]=useState("小明"); let addClick=useCallback(()=>setNumber(number+1),[number]);//返回的是一个函数使用useCallback 两个参数 一个是函数，一个是要改变的值 let data=useMemo(()=>({number}),[number])//返回的是一个对象，一个是返回的值和一个是改变的值

 return ( <> <input value={name} onChange={event=>SetName(event.target.value)}/> {/* 组件，需要传递的值 */} <Child data={data} addClick={addClick}/>  

  </>  )}





function render(){ ReactDOM.render(   <App /> , document.getElementById('root'));}render()

三、useReducer

作用：在 hooks 中提供了的 useReducer 功能，可以增强 ReducerDemo 函数提供类似 Redux 的功能，引入 useReducer 后，useReducer 接受一个 reducer 函数作为参数，reducer 接受两个参数一个是 state 另一个是 action 。然后返回一个状态 count 和 dispath，count 是返回状态中的值，而 dispatch 是一个可以发布事件来更新 state 的。

代码：

import React,{memo} from 'react';import ReactDOM from 'react-dom';

function reducer(state,action){if(action.type==='add'){ return state+1}else{ return state}}// 封装useReducerlet lastState; //初始值function useReducer(reducer,initialState){ //传入方法和传进来的值

 lastState=lastState||initialState; //初始值如果有值就用初始化的值，没有就使用传进来的值 function dispatch(action){ //触发方法传进来的是和redux里面一样 lastState=reducer(lastState,action);//把处理的数据结果返回 render()//重新渲染下页面 } return [lastState,dispatch] //把方法返回出去

}





function Counter(){ let [state,dispatch]=useReducer(reducer,0); return ( <div> <p>{state}</p> <button onClick={()=>dispatch({type:'add'})}>+</button> </div> )}



function render(){ ReactDOM.render(  <Counter /> , document.getElementById('root'));}render()

五、useContext

作用：如果需要在组件之间共享状态，可以使用useContext()。

import React,{memo,useContext,useState} from 'react';import ReactDOM from 'react-dom';// useContext的使用let AppContext=React.createContext(); //第一步在它们的父组件上使用React的Context API，在组件外部建立一个Context。

function Counter(){ let {state,setState}=useContext(AppContext)//可以直接使用外层AppContext.Provider传递的value的值和方法  return ( <div> <p>{state.number}</p> <button onClick={()=>setState({number:state.number+1})}>+</button>  </div> )}function App(){ let [state,setState]=useState({number:0}); return ( <AppContext.Provider value={{state,setState}}>  {/**我们直接用我们生成的context对象里面的provider来包裹自己的组件,组件不管多深就可以可以拿到父组件传递过去的*/} <div> <div> <Counter/>

 </div> </div> </AppContext.Provider>

 )}

function render(){ ReactDOM.render(  <App /> , document.getElementById('root'));}render()

六、useEffect和useLayoutEffect

作用：就是hook里面的生命周期,你可以看做是类组件中的 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

import React,{memo,useContext,useState,useEffect,useLayoutEffect} from 'react';import ReactDOM from 'react-dom';







function App(){ let [state,setState]=useState(0); useEffect(()=>{//游览器执行完成之后执行 console.log("useEffect") console.log(state,"数据") },[]) useLayoutEffect(()=>{ //游览器执行之前执行 防阻塞模式 console.log("useLayoutEffect") },[])//传入的是空数组的话就只运行一次,如果是有监听数据的话，当他发生改变的时候会一直执行 console.log("render") return ( <> <div>{state}</div> <button onClick={()=>setState(state+1)}>增加</button> </>

 )}

function render(){ ReactDOM.render( <App /> , document.getElementById('root'));}render()

七、useRef

作用主要是获取dom节点，需要绑定在节点上面

import React,{useRef} from 'react';import ReactDOM from 'react-dom';







function App(){ let ref=useRef() console.log(ref,"demo")  return ( <>  <button ref={ref}>增加</button> </>

 )}

function render(){ ReactDOM.render( <App /> , document.getElementById('root'));}render()